/**************************************
* VLOOK CSS 基础库
**************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

欢迎屏 / .mdx-welcome-screen / z-index: 4000;
聚光灯 / .mdx-spotlight / z-index: 4000;

---------- 高优先信息 UI 区 -----

工具栏提示、弹窗提示 / .mdx-tool-tips, .mdx-info-tips / z-index: 3000;

---------- 二级 UI 区 ----------

插图导航 / .mdx-figure-nav / z-index: 2200;
脚注面板 / .mdx-footer-note-panel / z-index: 2100;
大纲面板 / .mdx-toc-panel / z-index: 2000;
    大纲面板头部 / .mdx-toc-panel-header / z-index: 10;
    大纲面板脚部 / .mdx-toc-panel-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .mdx-mask / z-index: 1000;
mermaid 工具提示 / div.mermaidTooltip / z-index: 100;
？？ / .CodeMirror div.CodeMirror-cursor / z-index: 3;

---------- 增强工具操作区 ----------

工具栏 / .mdx-toolbar / z-index: 100;
逐章导航面板 / .mdx-chapter-nav / z-index: 100;

---------- 文档内容交互区 ----------

在新标签中打开按钮 / .mdx-btn-open-in-new-tab / z-index: 50;
复制代码块按钮 / .mdx-btn-copy-code-block / z-index: 50;
内容展开操作区 / .mdx-content-expander / z-index: 10;

**************************************/

// VLOOK Logo
@vlookLogo: "";
// Light Mode 时透明插图的背景
// @figureBackgroundLight: url("");
@figureBackgroundLight: @docBgColorLight;
// Dark Mode 时透明插图的背景
// @figureBackgroundDark: url("");
@figureBackgroundDark: @docBgColorDark;
// 按钮阴影
@buttonShadow: 0 2px 10px rgba(0, 0, 0, 0.3);
@buttonShadowNoblur: 0 2px 0 rgba(0, 0, 0, 0.3);

:root {
    --vlook-theme-name: @themeName; // 主题
    --vlook-default-font-style: @defaultFontStyle; // 默认字体风格
    --vlook-color-scheme: "light"; // 默认颜色模式为：Light 明亮

    // 大纲面板、工具工具栏宽度
    --vlook-toc-box-width:350px;
    --vlook-toc-box-hidden-left:-370px;

    // --------------------
    // Light 模式的颜色值
    --vlook-invert-in-dark-light: invert(0); // Light 模式下图片滤镜
    --doc-bg-color-light: @docBgColorLight;
    --doc-bg-color-alt-light: @docBgColorLightAlt;
    --doc-bg-color-transparent-light: fade(@docBgColorLight, 0%);
    --doc-bg-color-alt-transparent-light: fade(@docBgColorLightAlt, 0%);
    --fore-color-light: @foreColorLight;
    --fore-color-alt-light: @foreColorLightAlt;
    --tips-bg-color-light: @foreColorDark;
    --tips-bg-color-inset-light: @foreColorLight;
    --shadow-color-light: rgba(0, 0, 0, 0.1);
    --a-color-light: @aColor;
    --mark-color-light: rgba(255, 208, 48, 0.4);
    // --a-line-color-light: @aLineColor;
    // --a-active-color-light: @aActiveColor;
    // --theme-bg-color-fade-light: @themeBgColorFade;
    --table-color-light: @tableColor;
    --table-border-color-light: @tableBorderColor;
    --table-th-bg-color-light: @tableThBgColor;
    --table-th-border-color-light: @tableThBorderColor;
    //   --table-td-bg-color2-light: @tableTdBgColor2;
    // --img-dark-filter-light: none;
    --del-color-light: @foreColorLightAlt;
    --toc-header-num-color-light: @tocHeaderNumColor;
    // --content-header-num-color-light: @contentHeaderNumColor;
    --header-color-light: @headerColor;
    --header-box-shadow-light: fade(@headerColor, 20%);
    --header-bg-start-color-light: fade(@headerColor, 0%);
    --header-bg-end-color-light: fade(@headerColor, 10%);
    --code-bg-color-light: @codeBgColor;
    // --code-bg-color-transparent-light: fade(@codeBgColor, 0%);
    --code-name-bg-color-light: @foreColorLight;
    --code-name-shadow-color-light: @foreColorLight;
    --accent-color1-light: @accentColor1;
    --accent-color2-light: @accentColor2;
    --accent-color3-light: @accentColor3;
    --accent-color4-light: @accentColor4;
    --accent-color5-light: @accentColor5;
    --accent-color6-light: @accentColor6;
    --mermaid-accent-color1-light: @accentColor1;
    --mermaid-accent-color1-alt-light: @accentColor1Alt;
    --mermaid-accent-color2-light: @accentColor2;
    --mermaid-accent-color2-alt-light: @accentColor2Alt;
    --mermaid-accent-color3-light: @accentColor3;
    --mermaid-accent-color3-alt-light: @accentColor3Alt;
    --mermaid-accent-color4-light: @accentColor4;
    --mermaid-accent-color4-alt-light: @accentColor4Alt;
    --mermaid-accent-color5-light: @accentColor5;
    --mermaid-accent-color5-alt-light: @accentColor5Alt;
    --mermaid-accent-color6-light: @accentColor6;
    --mermaid-accent-color6-alt-light: @accentColor6Alt;
    --cm-keyword-light: #770088;
    --cm-variable-light: @foreColorLight;
    --cm-variable-2-light: #0055AA;
    --cm-variable-3-light: #008855;
    --cm-tag-light: #117700;
    --cm-attribute-light: #0000CC;
    --cm-CodeMirror-cursor-light: @foreColorLightAlt;
    --cm-string-light: #AA1111;
    --cm-string-2-light: #FF5500;
    --cm-comment-light: #AA5500;
    --cm-header-light: #0000FF;
    --cm-quote-light: #009900;
    --cm-hr-light: #999999;
    --cm-link-light: #0000CC;
    --cm-negative-light: #DD4444;
    --cm-positive-light: #229922;
    --cm-meta-light: #555555;
    --cm-bulidin-light: #3300AA;
    --cm-bracket-light: #999977;
    --cm-atom-light: #221199;
    --cm-number-light: #116644;

    // --------------------
    // Dark 模式的颜色值
    --vlook-invert-in-dark-dark: invert(1); // Dark 模式下图片滤镜
    --doc-bg-color-dark: @docBgColorDark;
    --doc-bg-color-alt-dark: @docBgColorDarkAlt;
    --doc-bg-color-transparent-dark: fade(@docBgColorDark, 0%);
    --doc-bg-color-alt-transparent-dark: fade(@docBgColorDarkAlt, 0%);
    --fore-color-dark: @foreColorDark;
    --fore-color-alt-dark: @foreColorDarkAlt;
    --tips-bg-color-dark: @docBgColorDarkAlt;
    --tips-bg-color-inset-dark: @foreColorDark;
    --shadow-color-dark: rgba(255, 255, 255, 0.1);
    --a-color-dark: @aColorDark;
    --mark-color-dark: rgba(255, 208, 48, 0.2);
    // --a-line-color-dark: @aLineColor;
    // --a-active-color-dark: @aActiveColor;
    // --theme-bg-color-fade-dark: @themeBgColorFade;
    --table-color-dark: @tableColorDark;
    --table-border-color-dark: @tableBorderColorDark;
    --table-th-bg-color-dark: @tableThBgColorDark;
    --table-th-border-color-dark: @tableThBorderColorDark;
    //   --table-td-bg-color2-dark: @tableTdBgColor2;
    // --img-dark-filter-dark: brightness(0.9);
    --del-color-dark: darken(@foreColorDark, 20%);
    --toc-header-num-color-dark: fade(@foreColorDark, 50%);
    // --content-header-num-color-dark: lighten(@contentHeaderNumColor, 15%);
    --header-color-dark: @headerColorDark;
    --header-box-shadow-dark: fade(@headerColorDark, 20%);
    --header-bg-start-color-dark: fade(@headerColorDark, 0%);
    --header-bg-end-color-dark: fade(@headerColorDark, 15%);
    --code-bg-color-dark: @codeBgColorDark;
    // --code-bg-color-transparent-dark: fade(@codeBgColorDark, 0%);
    --code-name-bg-color-dark: @docBgColorDark;
    --code-name-shadow-color-dark: @foreColorLightAlt;
    --accent-color1-dark: @accentColor1Dark;
    --accent-color2-dark: @accentColor2Dark;
    --accent-color3-dark: @accentColor3Dark;
    --accent-color4-dark: @accentColor4Dark;
    --accent-color5-dark: @accentColor5Dark;
    --accent-color6-dark: @accentColor6Dark;
    --mermaid-accent-color1-dark: @accentColor1AltDark;
    --mermaid-accent-color1-alt-dark: @accentColor1Dark;
    --mermaid-accent-color2-dark: @accentColor2AltDark;
    --mermaid-accent-color2-alt-dark: @accentColor2Dark;
    --mermaid-accent-color3-dark: @accentColor3AltDark;
    --mermaid-accent-color3-alt-dark: @accentColor3Dark;
    --mermaid-accent-color4-dark: @accentColor4AltDark;
    --mermaid-accent-color4-alt-dark: @accentColor4Dark;
    --mermaid-accent-color5-dark: @accentColor5AltDark;
    --mermaid-accent-color5-alt-dark: @accentColor5Dark;
    --mermaid-accent-color6-dark: @accentColor6AltDark;
    --mermaid-accent-color6-alt-dark: @accentColor6Dark;
    --cm-keyword-dark: #C88FD0;
    --cm-variable-dark: @foreColorDark;
    --cm-variable-2-dark: #9FBAD5;
    --cm-variable-3-dark: #1CC685;
    --cm-tag-dark: #7DF46A;
    --cm-attribute-dark: #7575E4;
    --cm-CodeMirror-cursor-dark: @foreColorDarkAlt;
    --cm-string-dark: #D26B6B;
    --cm-string-2-dark: #FF5500;
    --cm-comment-dark: #DA924A;
    --cm-header-dark: #8D8DF0;
    --cm-quote-dark: #57AC57;
    --cm-hr-dark: #D8D5D5;
    --cm-link-dark: #D3D3EF;
    --cm-negative-dark: #D95050;
    --cm-positive-dark: #50E650;
    --cm-meta-dark: #B7B3B3;
    --cm-bulidin-dark: #F3B3F8;
    --cm-bracket-dark: #999977;
    --cm-atom-dark: #84B6CB;
    --cm-number-dark: #64AB8F;

    // --------------------
    // 颜色变量
    --vlook-invert-in-dark: var(--vlook-invert-in-dark-light); // 图片滤镜
    --doc-bg-color: var(--doc-bg-color-light);
    --doc-bg-color-alt: var(--doc-bg-color-alt-light);
    --doc-bg-color-transparent: var(--doc-bg-color-transparent-light);
    --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-light);
    --fore-color: var(--fore-color-light);
    --fore-color-alt: var(--fore-color-alt-light);
    --tips-bg-color: var(--tips-bg-color-light);
    --tips-bg-color-inset: var(--tips-bg-color-inset-light);
    --shadow-color: var(--shadow-color-light);
    --a-color: var(--a-color-light);
    --mark-color: var(--mark-color-light);
    // --a-line-color: var(--a-line-color-light);
    // --a-active-color: var(--a-active-color-light);
    // --theme-bg-color-fade: var(--theme-bg-color-fade-light);
    --table-color: var(--table-color-light);
    --table-border-color: var(--table-border-color-light);
    --table-th-bg-color: var(--table-th-bg-color-light);
    --table-th-border-color: var(--table-th-border-color-light);
    // --img-dark-filter: var(--img-dark-filter-light);
    --del-color: var(--del-color-light);
    --toc-header-num-color: var(--toc-header-num-color-light);
    // --content-header-num-color: var(--content-header-num-color-light);
    --header-color: var(--header-color-light);
    --header-box-shadow: var(--header-box-shadow-light);
    --header-bg-start-color: var(--header-bg-start-color-light);
    --header-bg-end-color: var(--header-bg-end-color-light);
    --code-bg-color: var(--code-bg-color-light);
    // --code-bg-color-transparent: var(--code-bg-color-transparent-light);
    --code-name-bg-color: var(--code-name-bg-color-light);
    --code-name-shadow-color: var(--code-name-bg-color);
    --accent-color1: var(--accent-color1-light);
    --accent-color2: var(--accent-color2-light);
    --accent-color3: var(--accent-color3-light);
    --accent-color4: var(--accent-color4-light);
    --accent-color5: var(--accent-color5-light);
    --accent-color6: var(--accent-color6-light);
    // --accent-color6-alt: var(--accent-color6-alt-light);
    --mermaid-accent-color1: var(--mermaid-accent-color1-light);
    --mermaid-accent-color1-alt: var(--mermaid-accent-color1-alt-light);
    --mermaid-accent-color2: var(--mermaid-accent-color2-light);
    --mermaid-accent-color2-alt: var(--mermaid-accent-color2-alt-light);
    --mermaid-accent-color3: var(--mermaid-accent-color3-light);
    --mermaid-accent-color3-alt: var(--mermaid-accent-color3-alt-light);
    --mermaid-accent-color4: var(--mermaid-accent-color4-light);
    --mermaid-accent-color4-alt: var(--mermaid-accent-color4-alt-light);
    --mermaid-accent-color5: var(--mermaid-accent-color5-light);
    --mermaid-accent-color5-alt: var(--mermaid-accent-color5-alt-light);
    --mermaid-accent-color6: var(--mermaid-accent-color6-light);
    --mermaid-accent-color6-alt: var(--mermaid-accent-color6-alt-light);
    --cm-keyword: var(--cm-keyword-light);
    --cm-variable: var(--cm-variable-light);
    --cm-variable-2: var(--cm-variable-2-light);
    --cm-variable-3: var(--cm-variable-3-light);
    --cm-tag: var(--cm-tag-light);
    --cm-attribute: var(--cm-attribute-light);
    --cm-CodeMirror-cursor: var(--cm-CodeMirror-cursor-light);
    --cm-string: var(--cm-string-light);
    --cm-string-2: var(--cm-string-2-light);
    --cm-comment: var(--cm-comment-light);
    --cm-header: var(--cm-header-light);
    --cm-quote: var(--cm-quote-light);
    --cm-hr: var(--cm-hr-light);
    --cm-link: var(--cm-link-light);
    --cm-negative: var(--cm-negative-light);
    --cm-positive: var(--cm-positive-light);
    --cm-meta: var(--cm-meta-light);
    --cm-bulidin: var(--cm-bulidin-light);
    --cm-bracket: var(--cm-bracket-light);
    --cm-atom: var(--cm-atom-light);
    --cm-number: var(--cm-number-light);
}

html {
    font-size: @fontSize;
    cursor: default;
}

::selection {
    background: @selectionColor;
}

html,
body {
    background-color: var(--doc-bg-color);
    color: var(--fore-color);
    font-family: @textFont;
    font-weight: normal;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
// 性能优化    transition: all 0.3s ease-in-out;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

img {
    margin: 0 !important;
    // float: left;
    // filter: var(--img-dark-filter);
}

// 图片 RUL 参数指定是否填充边缘
img[src*="padding=true"] {
    padding: 10px !important;
}

//
img[src$=".wav"] {
    border: 10px solid #F00 !important;
    width: 200px !important;
    height: 50px !important;
    background-image: url(@vlookLogo) !important;
}

audio {
    margin: 0 10px 0 10px;
    border-radius: 8px;
}

a {
    color: var(--a-color) !important;
    border-bottom: @aBorderWidth solid @aLineColor;
    font-family: @boldFont;
    text-decoration: none;
    margin-left: 0.1em;
    margin-right: 0.1em;
// 性能优化    transition: all 0.3s ease-in-out;
}

a:hover {
    color: @aHoverColor !important;
    box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}

a:active {
    color: @aActiveColor !important;
    border-color: @aActiveColor;
// 性能优化    transition: all 0.3s ease-in-out;
}

// 普通超链接增加 hover 时的符号
a:not([name^="ref-footnote"]):hover::after {
    content: "🔗"; // 非页内链接的符号
    margin-top: -0.7em;
    font-size: 0.7em;
    position: absolute;
}
a[href^="#"]:hover::after {
    content: "🔖"; // 页面内链接的符号
}

// 下划线
u {
    text-decoration: none;
    border-bottom: 1px solid var(--fore-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-color);
    position: relative;
    margin: 1em 0 0.5em 0;
    padding: 10px;
    line-height: 1.5;
    font-family: @headerFont;
    font-weight: @fontWeight;
    border-radius: 16px 16px 0 0;
    // box-shadow: 0 1px 0 0 var(--header-box-shadow) inset;
    background: linear-gradient(0deg, var(--header-bg-start-color), var(--header-bg-end-color));
}

h1+ul,
h1+ol,
h2+ul,
h2+ol,
h3+ul,
h3+ol,
h4+ul,
h4+ol,
h5+ul,
h5+ol,
h6+ul,
h6+ol {
    margin-top: 0;
}

h1 {
    margin-top: 5em;
    font-size: 2em;
    box-shadow: 0 3px 0 0 var(--header-box-shadow) inset;
}

h2 {
    margin-top: 3em;
    font-size: 1.8em;
    box-shadow: 0 2px 0 0 var(--header-box-shadow) inset;
}

// h1 后紧跟 h2，或是只有普通正文段落的情况
// h1 + p + h2,
h1 + h2 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h3 {
    margin-top: 2em;
    font-size: 1.6em;
    box-shadow: 0 1px 0 0 var(--header-box-shadow) inset;
}

// h2 后紧跟 h3，或是只有普通正文段落的情况
// h2 + p + h3,
h2 + h3 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h4 {
    margin-top: 2em;
    font-size: 1.4em;
    box-shadow: 0 1px 0 0 var(--header-box-shadow) inset;
}

// h3 后紧跟 h4，或是只有普通正文段落的情况
// h3 + p + h4,
h3 + h4 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h5 {
    font-size: 1.2em;
    box-shadow: 0 0 0 0 var(--header-box-shadow) inset;
    // background: none;
}

// h4 后紧跟 h5，或是只有普通正文段落的情况
// h4 + p + h5,
h4 + h5 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h6 {
    margin-bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    // line-height: 1;
    font-family: @boldFont;
    font-size: 1.1em;
    box-shadow: none;
    background: none;
}

h1 + h6,
h2 + h6,
h3 + h6,
h4 + h6,
h5 + h6,
h6 + h6 {
    margin-top: 0;
    padding-top: 0;
}

// h1 + p,
// h2 + p,
// h3 + p,
// h4 + p,
// h5 + p {
//     margin-left: 0.5em;
//     margin-right: 0.5em;
// }

// h6::before {
//     content: "◎ ";
//     color: @contentHeaderNumColor;
// }

li > h6 {
    // 用于：子表
    color: var(--header-color);
    border-left: 0;
    padding-left: 0;
}

li > h6::before {
    content: "▪ ";
    color: @contentHeaderNumColor;
}

strong {
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
}

hr {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    border: 1px solid @foreColorLightAlt;
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body > div > h1:first-of-type {
    border-top: 0;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child > h1,
a:first-child > h2,
a:first-child > h3,
a:first-child > h4,
a:first-child > h5,
a:first-child > h6 {
    margin-top: 0;
    padding-top: 0;
}

// 配合内容块聚焦模式使用
ul > li,
ol > li,
p,
figure,
.md-diagram-panel {
    text-align: left;
    margin-top: 0;
}

figure {
    margin-bottom: 20px;
    border-radius: 16px;
}

// 有序列表下无序列表：1级
ol > li,
ul > li {
    list-style-type: decimal;
}

// 有序列表下无序列表：2级
ol > li > ul > li,
ul > li > ul > li {
    list-style-type: lower-alpha;
}

// 有序列表下无序列表：3级
ol > li > ul > li > ul > li,
ul > li > ul > li > ul > li {
    list-style-type: disc;
}

// 有序列表下无序列表：4级
ol > li > ul > li > ul > li > ul > li,
ul > li > ul > li > ul > li > ul > li {
    list-style-type: lower-roman;
}

// 有序列表下无序列表：5级
ol > li > ul > li > ul > li > ul > li > ul > li,
ul > li > ul > li > ul > li > ul > li > ul > li {
    list-style-type: circle;
}

// 有序列表下无序列表：6级
ol > li > ul > li > ul > li > ul > li > ul > li > ul > li,
ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
    list-style-type: square;
}

// 多级无序列表：1级
// ul > li {
//     list-style-type: decimal;
// }

// 多级无序列表：2级
// ul > li > ul > li {
    // list-style-type: lower-alpha;
// }

// 多级无序列表：3级
// ul > li > ul > li > ul > li {
//     list-style-type: disc;
// }

// 多级无序列表：4级
// ul > li > ul > li > ul > li > ul > li {
//     list-style-type: lower-roman;
// }

// 多级无序列表：5级
// ul > li > ul > li > ul > li > ul > li > ul > li {
//     list-style-type: circle;
// }

// 多级无序列表：6级
// ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
//     list-style-type: square;
// }

ul,
ol {
    padding-left: 2em;
    padding-bottom: 0;
}

blockquote {
    border-left: 5px solid @accentColor2Fade;
    // border: 1px solid @accentColor2Fade;
    // border-radius: 16px;
    // padding: 0.5em 0.5em 1em 0.5em;
    padding: 0.5em;
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--fore-color);
    background-color: fade(@accentColor2, 5%);
}

blockquote > p {
    margin-bottom: 0;
}

blockquote > a {
    color: @accentColor2;
}

blockquote > ul,
blockquote > ol {
    margin-top: 0;
}

// blockquote > ul > li,
// blockquote > ol > li {
//     color: var(--fore-color);
// }

// blockquote > ul > li > a,
// blockquote > ol > li > a {
//     color: var(--fore-color);
// }

// 双重引用
blockquote > blockquote {
    border-left: 10px solid fade(@accentColor2, 20%);
    // border: 1px solid fade(@accentColor2, 15%);
    // margin-left: 0.5em;
    // margin-right: 1em;
    border-top-left-radius: 0;
}

// 三重引用
blockquote > blockquote > blockquote {
    border-left: 15px solid fade(@accentColor2, 20%);
    // border-width: 2px;
}

// 四重，或更多重引用
blockquote > blockquote > blockquote > blockquote {
    border-left: 20px solid fade(@accentColor2, 20%);
    // border-width: 3px;
}

// blockquote > blockquote {
    // padding-right: 0;
// }

blockquote > strong {
    color: inherit !important;
}

// table {
//     white-space: pre-wrap !important;
// }

table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
    border: 2px solid var(--table-border-color);
    border-radius: 16px;
    background-color: var(--doc-bg-color);
}

table:hover {
    border-color: var(--table-border-color) !important;
}

thead {
    display: contents !important; // 避免分页后重复显示表头
}
table > thead > tr {
    margin: 0;
    padding: 0;
}

// 表格表头
table > thead > tr > th,
table > thead > tr > td {
    background-color: var(--table-th-bg-color);
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
    //   color: var(--table-th-color);
    border-right: 1px solid fade(@tableTdBorderColor, 10%);
    margin: 0;
    padding: 0.5em;
    box-shadow: 0 1px 0 var(--table-th-border-color);
}

// 非首行
table > tbody > tr:not(:first-child) > td {
    box-shadow: 0 -1px 0 @tableTdBorderColor;
}

// 偶数行
table > tbody > tr:nth-child(2n) {
    background-color: @tableTdBgColor2;
}

// 表头首行的首/尾列
table > thead > tr:first-child > th:first-child {
    border-top-left-radius: 14px; // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
    white-space: pre;
}

table th,
table td {
    white-space: pre-line !important;
    font-size: 0.85em;
    position: relative;
}

// table th:first-child,
// table td:first-child {
// table th,
// table td {
//   white-space: pre !important; // 表格首列默认不换行
// }

table > thead > tr:first-child > th:last-child {
    border-top-right-radius: 14px; // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首/尾列
table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 14px; // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 14px; // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

table tr > td {
    border-right: 1px solid fade(@tableTdBorderColor, 10%);
    margin: 0;
    padding: 0.5em 0.5em;
}

// 表格首列
table tr > th:first-child,
table tr > td:first-child {
    padding-left: 0.5em;
    white-space: pre !important; // 表格首列默认不换行
}
// 表格末列
table tr > th:last-child,
table tr > td:last-child {
    border-right: 0;
    padding-right: 0.5em;
}

table tr:last-child > td {
    border-bottom: 0;
}

// 表格列格式：加粗
.mdx-table-column-format-bold {
    font-family: @boldFont;
    font-weight: @fontWeight;
}

// 表格列格式：斜体
.mdx-table-column-format-em {
    font-style: italic;
}

// 表格列格式：高亮
.mdx-table-column-format-mark {
    background-color: var(--mark-color) !important;
    color: var(--fore-bg-color) !important;
}

// 表格列格式：数值
.mdx-table-column-format-number {
    font-family: @codeFont;
}
// 表格列格式：负数
.mdx-table-column-format-number-negative {
    color: #E00000;
}

// 带表格带行折叠时，是目录行的样式
.mdx-table-rowfolding-folder {
    text-align: left !important;
}

// 带表格带行折叠时，不是目录行的样式
.mdx-table-rowfolding-not-folder {
    text-align: left !important;
    padding-left: 24px !important;
}

// 折叠按钮样式
.mdx-table-rowfolding-button {
    cursor: pointer;
}

// 被折叠行的样式
.mdx-table-rowfolding-sub {
    text-align: left !important;
    padding-left: 0.5em !important;
}

// 缩进的占位元素样式
.mdx-table-rowfolding-identer,
.mdx-table-rowfolding-identer-blank {
    width: 4px;
    height: 32px;
    display: inline-block;
    // border-radius: 2px;
    padding: 0;
    margin: -10px 24px -10px 4px;
}
.mdx-table-rowfolding-identer::before {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    top: 0;
    background-color: fade(@themeBgColorFade, 50%);
    position: absolute;
}
// 连续缩进的占位元素进行修正
.mdx-table-rowfolding-identer + .mdx-table-rowfolding-identer,
.mdx-table-rowfolding-identer + .mdx-table-rowfolding-identer-blank,
.mdx-table-rowfolding-identer-blank + .mdx-table-rowfolding-identer {
    margin-left: -12px !important;
}

// 缩进的单元格为目录节点
.mdx-table-rowfolding-identer-folder {
    margin-right: 8px;
}
// 不同进行层级样式
// .mdx-table-rowfolding-identer-lv1 {
//     background-color: fade(@themeBgColorFade, 50%);
// }
// .mdx-table-rowfolding-identer-lv2 {
//     background-color: fade(@themeBgColorFade, 20%);
// }
// .mdx-table-rowfolding-identer-lv3 {
//     background-color: fade(@themeBgColorFade, 30%);
// }
// .mdx-table-rowfolding-identer-lv4 {
//     background-color: fade(@themeBgColorFade, 20%);
// }
// .mdx-table-rowfolding-identer-lv5 {
//     background-color: fade(@themeBgColorFade, 10%);
// }

// li/header下的表格增加表格行号
li > figure table,
h1 + figure table,
h2 + figure table,
h3 + figure table,
h4 + figure table,
h5 + figure table,
h6 + figure table {
    counter-reset: tableRowNumber - 1;
}

li > figure table tbody tr,
h1 + figure table tbody tr,
h2 + figure table tbody tr,
h3 + figure table tbody tr,
h4 + figure table tbody tr,
h5 + figure table tbody tr,
h6 + figure table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
figure table tr::before {
    content: "";
    color: var(--toc-header-num-color);
    font-family: @codeFont;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 0.8em;
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: 1em;
    padding-top: 5px;
}

// 列表下的表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
li > figure table tbody tr::before {
    content: counter(tableRowNumber) " ";
    left: -2.8em;
}

// 表格折叠后强制隐藏表格行号
.mdx-table-row-num-hidden::before {
    content: "" !important;
}

// h1-6 下的表格行号格式微调
// h1 + figure table tr::before,
// h2 + figure table tr::before,
// h3 + figure table tr::before,
// h4 + figure table tr::before,
// h5 + figure table tr::before,
// h6 + figure table tr::before {
//     left: 0.4em;
// }

// h1-6 下的表格行号
h1 + figure table tbody tr::before,
h2 + figure table tbody tr::before,
h3 + figure table tbody tr::before,
h4 + figure table tbody tr::before,
h5 + figure table tbody tr::before,
h6 + figure table tbody tr::before {
    content: counter(tableRowNumber) " ";
    left: 0.5em;
}

// li下的H6下的表格行号格式微调
li > h6 + figure {
    margin-left: 0;
}

li h6 + figure table tr::before {
    left: -3em;
}

// li/header 后的表格，格式微调
li > figure {
    margin-top: 0;
}

// h1-6 后的表格，格式微调
h1 + figure,
h2 + figure,
h3 + figure,
h4 + figure,
h5 + figure,
h6 + figure {
    margin-top: 0;
    margin-left: 2em;
}

// 表格十字光标
.mdx-table-cross {
    width: 100px;
    height: 100px;
    position: absolute;
    display: none;
    pointer-events: none;
}

.mdx-table-cross-left {
    background: linear-gradient(90deg, fade(@aLineColor, 1%), @tableCrossBgColor);
}

.mdx-table-cross-right {
    background: linear-gradient(90deg, @tableCrossBgColor, fade(@aLineColor, 1%));
}

.mdx-table-cross-up {
    background: linear-gradient(0deg, @tableCrossBgColor, fade(@aLineColor, 1%));
}

.mdx-table-cross-down {
    background: linear-gradient(0deg, fade(@aLineColor, 1%), @tableCrossBgColor);
}

// 高亮
mark {
    box-shadow: 0 -0.9em 0 0 var(--mark-color) inset;
    background: none;
    // background-color: var(--mark-color) !important;
    // border-radius: 0.3em;
    // padding: 0 0.2em;
    // margin: 0 0.1em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    color: var(--fore-color);
}

// 单元格内的高亮
// th mark,
// td mark {
//     width: 100%;
//     display: inline-block;
//     box-shadow: 0 0 0 0.5em var(--mark-color);
//     background: var(--mark-color);
// }

// 删除
del,
del strong {
    // font-style: italic;
    color: var(--del-color) !important;
    text-decoration: line-through solid !important;
}

del code {
    font-style: italic;
    text-decoration: line-throug solid !important;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: 0.5em;
    padding-bottom: 0.5em;
}

// 弹层中的脚注行
.mdx-footer-note-panel-content > .footnote-line {
    padding-bottom: 50px;
}

// 脚注行序号
.md-fn-count {
    font-family: @boldFont;
}

.md-fn-count::before {
    content: "[";
}

.md-fn-count::after {
    content: "] ";
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accentColor1;
}

.reversefootnote:hover {
    color: @accentColor4;
// 性能优化    transition: all 0.3s ease-in-out;
}

// 脚注上标
a[name^="ref-footnote-"] {
    font-family: @boldFont;
    color: @accentColor1;
}

a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
// 性能优化    transition: all 0.3s ease-in-out;
}

a[name^="ref-footnote-"]::before {
    content: "[";
}

a[name^="ref-footnote-"]::after {
    content: "] ";
}

.CodeMirror-gutters {
    border-width: 0;
    background-color: var(--doc-bg-color-alt);
    border-right: 1px solid var(--doc-bg-color-alt);
    height: 100% !important; // 避免代码块的题注 hover 样式的背景色透出
}

.CodeMirror-linenumber {
    color: @foreColorLightAlt;
}

tt,
code {
    color: var(--fore-color);
    font-family: @codeFont;
    background-color: var(--code-bg-color);
    border-radius: 0.3em;
    padding: 0.1em 0.2em;
    margin: 0 0.1em;
    // box-shadow: 0 0 0 1px var(--doc-bg-color) inset;
    // font-size: 0.85em;
    display: inline;
    white-space: pre;
    // vertical-align: middle;
}

.md-fences {
    color: var(--fore-color);
    font-family: @codeFont;
    // font-size: 0.8em;
    border-radius: 16px;
    border: 2px solid var(--table-border-color);
    // padding: 1px 4px 1px 4px;
    margin: 0;
}

// .md-fences:hover {
//     border: 2px solid @aHoverColor;
// }

.task-list {
    padding-left: 0;
}

.task-list-item {
    padding-left: 32px;
}

.task-list-item input {
    top: 3px;
    left: 8px;
}

#write pre.md-meta-block {
    padding: 1em;
    font-size: 85%;
    line-height: 2;
    background-color: @foreColorLightFade3;
    border: 0;
    border-radius: 3px;
    color: @foreColorLight;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: 0.375em;
}

// #write > h3.md-focus::before {
//     left: -1.5625em;
//     top: 0.375em;
// }

// #write > h4.md-focus::before {
//     left: -1.5625em;
//     top: 0.285714286em;
// }

// #write > h5.md-focus::before {
//     left: -1.5625em;
//     top: 0.285714286em;
// }

.md-image > .md-meta {
    border: 1px solid @tableBorderColor;
    background-color: @foreColorLightFade3;
    border-radius: 3px;
    padding: 2px 4px 0 4px;
    color: inherit;
}

.md-tag {
    color: inherit;
}

#typora-quick-open {
    border: 1px solid @tableBorderColor;
    background-color: @foreColorLightFade3;
}

#typora-quick-open-item {
    background-color: @foreColorLightFade3;
    border-color: @tableBorderColor;
    border-style: solid;
    border-width: 1px;
}

#md-notification::before {
    top: 10px;
}

/** focus mode */

.on-focus-mode blockquote {
    border-left-color: @foreColorLight;
}

header,
.context-menu,
.megamenu-content,
footer {}

/**************************************
* Header Counters in TOC 目录中的标题序号样式
**************************************/

/* No link underlines in TOC */

.md-toc-content {
    counter-reset: h1toc;
}

.md-toc-h1 {
    margin-left: 0;
    padding-left: 10px;
    counter-reset: h2toc;
}

.md-toc-h2 {
    margin-left: 0;
    padding-left: 20px;
    counter-reset: h3toc;
}

.md-toc-h3 {
    margin-left: 0;
    padding-left: 30px;
    counter-reset: h4toc;
}

.md-toc-h4 {
    margin-left: 0;
    padding-left: 40px;
    counter-reset: h5toc;
}

.md-toc-h5 {
    margin-left: 0;
    padding-left: 50px;
    counter-reset: h6toc;
}

.md-toc-h6 {
    display: none;
    margin-left: 0;
    padding-left: 50px;
}

// .md-toc-h1 > a,
// .md-toc-h2 > a,
// .md-toc-h3 > a,
// .md-toc-h4 > a,
// .md-toc-h5 > a,
// .md-toc-item a {
//     border: 0;
// }

// .md-toc-h1 > a:hover,
// .md-toc-h2 > a:hover,
// .md-toc-h3 > a:hover,
// .md-toc-h4 > a:hover,
// .md-toc-h5 > a:hover,
// .md-toc-item a:hover {
//     box-shadow: inherit;
// // 性能优化    transition: all 0.3s ease-in-out;
// }

// .md-toc-h1 > a::after,
// .md-toc-h2 > a::after,
// .md-toc-h3 > a::after,
// .md-toc-h4 > a::after,
// .md-toc-h5 > a::after,
// .md-toc-item a::after {
//     content: "";
// }

.md-toc-h1::before {
    counter-increment: h1toc;
    content: counter(h1toc) ".  ";
}

.md-toc-h1 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h2::before {
    counter-increment: h2toc;
    content: counter(h1toc) "." counter(h2toc) "  ";
}

.md-toc-h2 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h3::before {
    counter-increment: h3toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "  ";
}

.md-toc-h3 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h4::before {
    counter-increment: h4toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "  ";
}

.md-toc-h4 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h5::before {
    counter-increment: h5toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "  ";
}

.md-toc-h5 > .md-toc-inner {
    margin-left: 0;
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

/** initialize css counter */

#write {
    counter-reset: h1;
}

h1 {
    counter-reset: h2;
}

h2 {
    counter-reset: h3;
}

h3 {
    counter-reset: h4;
}

h4 {
    counter-reset: h5;
}

// h5 {
//     counter-reset: h6;
// }

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    color: @contentHeaderNumColor;
}

#write h1::before {
    counter-increment: h1;
    content: counter(h1) ".  ";
}

#write h2::before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) "  ";
}

// h3.md-focus.md-heading::before,
#write h3::before {
    /*override the default style for focused headings */
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) "  ";
}

// h4.md-focus.md-heading::before,
#write h4::before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "  ";
}

// h5.md-focus.md-heading::before,
#write h5::before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "  ";
}

// h6.md-focus.md-heading::before,
#write h6::before {
    // counter-increment: h6;
    // content: counter(h6);
    content: "◎ ";
}

/** override the default style for focused headings */

#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before {
    // color: inherit;
    border: inherit;
    // border-radius: inherit;
    position: inherit;
    left: inherit;
    float: none;
    top: initial;
    font-size: inherit;
    // padding-left: inherit;
    // padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/**************************************
* Electron UI
**************************************/

.outline-item {
    line-height: 1;
    font-family: @boldFont;
}

/**************************************
* 脚本化画表 CSS
**************************************/

/* ----- flow diagram 流程图 ----- */

// // 开始节点
// rect[id^="st"].flowchart {
//   fill: @foreColorLight;
//   stroke: @foreColorLight;
//   stroke-width: 5;
// }

// rect[id^="st"].flowchart + text > tspan {
//   fill: @docBgColorLight;
// }

// // 结束节点
// rect[id^="e"].flowchart {
//   fill: none;
//   stroke: var(--fore-color);
//   stroke-width: 5;
// }

// // 操作节点
// rect[id^="op"].flowchart {
//   fill: @accentColor1Alt;
//   stroke: @accentColor1;
//   stroke-width: 1;
// }

// // 子流程节点
// rect[id^="sub"],
// rect[id^="sub"].flowchart {
//   fill: @accentColor1Alt;
//   stroke: @accentColor1;
//   stroke-width: 2;
// }

// // 条件节点
// path[id^="c"].flowchart {
//   fill: @accentColor4Alt;
//   stroke: @accentColor4;
//   stroke-width: 1;
// }

// // I/O节点
// path[id^="io"].flowchart {
//   fill: @accentColor2Alt;
//   stroke: @accentColor2;
//   stroke-width: 1;
// }

// // 流程线
// path[fill="none"][stroke-width="3"][marker-end^="url(#raphael-marker-endblock"] {
//   stroke: @foreColorLight;
//   stroke-width: 2px;
// }

// // 流程线箭头
// marker[id^="raphael-marker-endblock"] > use {
//   fill: @foreColorLight;
// }

// // 文本
// text[text-anchor="start"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @boldColorLight;
// }

// /* ----- sequeuce diagram 时序图 ----- */

// // 标题
// rect[x="10"][y="10"][fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][rx="0"][ry="0"] {
//   fill: @docBgColorLight;
//   stroke: @foreColorLightAlt;
//   stroke-width: 2px;
// }

// // 矩形
// rect[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][rx="0"][ry="0"] {
//   fill: @accentColor1Alt;
//   stroke: @accentColor1;
//   stroke-width: 1px;
// }

// // 生命线
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"] {
//   // fill: none;
//   stroke: @accentColor1Fade;
//   stroke-width: 1px;
//   // stroke-dasharray: 5;
// }

// // 消息实线+实箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endblock"] {
//   // fill: none;
//   stroke: @foreColorLight;
//   stroke-width: 2px;
//   stroke-dasharray: none;
// }

// // 消息虚线+实箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endblock"][stroke-dasharray="6,2"] {
//   stroke-dasharray: 5;
// }

// // 消息实线+虚箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endopen"] {
//   // fill: none;
//   stroke: @foreColorLight;
//   stroke-width: 2px;
//   stroke-dasharray: none;
// }

// // 消息虚线+虚箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endopen"][stroke-dasharray="6,2"] {
//   stroke-dasharray: 5;
// }

// // 消息虚箭头
// marker[id^="raphael-marker-endopen"] > use {
//   stroke: @foreColorLight;
// }

// // 消息文本
// rect + text[text-anchor="middle"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @foreColorLight;
// }

// // 实体、注释文本
// rect + rect + text[text-anchor="middle"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @boldColorLight;
// }

/**************************************
* mermaid CSS
**************************************/

// ** 注意 **
// 更改些段与字体相关的样式时，须同步修改切换字体样式的 JS 代码

/* ----- pie diagram 饼图 ----- */

// 标题、图例文本
.pieTitleText {
    fill: var(--fore-color);
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
    font-size: 1.5em;
}
.legend text {
    fill: var(--fore-color);
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
}

.slice {
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
    // fill: var(--fore-color);
}

/* ----- flow diagram 流程图 ----- */

// 标签
// .mermaid .label,
// .mdx-figure .label {
//     color: var(--fore-color);
//     // fill: @foreColorLightAlt;
// }
.mermaid .label div,
.mdx-figure .label div {  
    font-size: 0.8em !important;
    // font-family: @boldFont;
}

svg[id^="mermaidChart"] {
    color: var(--fore-color);
}

// 矩形（方角/圆角/圆形/菱形/旗形）
.label div {
    color: var(--fore-color);
    font-family: @boldFont;
}

// 方角矩形
.node rect[rx="0"][ry="0"] {
    fill: var(--mermaid-accent-color1-alt) !important;
    stroke: var(--mermaid-accent-color1) !important;
    stroke-width: 5;
}

// 方角矩形文字
// .node rect[rx="0"][ry="0"]+.label div {
//     color: var(--fore-color);
//     font-family: @boldFont;
// }

// 圆角矩形
.node rect[rx="5"][ry="5"] {
    fill: var(--mermaid-accent-color1-alt) !important;
    stroke: var(--mermaid-accent-color1) !important;
    stroke-width: 1;
}

// .node rect[rx="5"][ry="5"] {
//     rx: 6 !important;
//     ry: 6 !important;
// }

// 圆角矩形文字（默认圆角矩形、调整后的状态机图圆角矩形）
// .node rect[rx="5"][ry="5"]+.label div,
// .node rect[rx="15"][ry="15"]+.label div {
//     color: var(--fore-color);
//     font-family: @boldFont;
// }

// 圆形
.node circle {
    fill: var(--doc-bg-color);
    stroke: var(--mermaid-accent-color2);
    stroke-width: 2;
}

// 圆形文字
// .node circle+.label div {
//     color: var(--fore-color);
//     font-family: @boldFont;
// }

// ？
// .node ellipse {
//     color: var(--fore-color);
//     fill: var(--fore-color-alt);
//     stroke: var(--fore-color);
//     stroke-width: 10;
// }

// 菱形
// polygon {
//     fill: var(--doc-bg-color) !important;
//     stroke: none !important;
// }

// 自定义：条件、分支的菱形
// .node[id^="cond"] polygon,
// .node[id^="fork"] polygon,
.node polygon {
    fill: var(--mermaid-accent-color4-alt);
    stroke: var(--mermaid-accent-color4);
    stroke-width: 1;
}

// 菱形文字
// .node[id^="cond"] polygon+.label div,
// .node[id^="fork"] polygon+.label div {
//     color: var(--fore-color);
//     font-family: @boldFont;
// }

// 自定义：分页的旗形
.node[id^="page"] polygon {
    fill: var(--doc-bg-color);
    stroke: var(--mermaid-accent-color2);
    stroke-width: 2;
}

// 自定义：状态机图的菱形
.node[id^="trans"] polygon {
    fill: var(--fore-color);
    stroke-width: 0;
}

// 不对称形状/旗形文字
// .node[id^="page"] polygon+.label div {
//     color: var(--fore-color);
//     font-family: @boldFont;
// }

// 线条
.edgePath .path {
    stroke: var(--fore-color);
    stroke-width: 2;
}

// 线条箭头
.arrowheadPath {
    fill: var(--fore-color);
}

// 线条文本
.edgeLabel .label span,
.edgeLabel {
    color: var(--fore-color);
    background-color: var(--doc-bg-color);
    // font-family: @boldFont;
    // font-size: 0.8em;
    // font-weight: @fontWeight;
    line-height: 1em;
}

// 线条文本背景
.edgeLabel div,
.edgeLabel .label rect {
    background-color: var(--doc-bg-color);
}

// 子图
.cluster rect {
    fill: var(--doc-bg-color-alt) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 3;
    // rx: 15 !important;
    // ry: 15 !important;
}

// 子图文本
.cluster text {
    color: var(--fore-color);
    fill: var(--fore-color);
    font-family: @boldFont;
}

// 自定义：流程图「开始」样式
#START rect {
    fill: var(--fore-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5 !important;
    // rx: 15 !important;
    // ry: 15 !important;
}

#START rect+.label div {
    color: var(--doc-bg-color) !important;
    // font-family: @boldFont;
}

// 自定义：流程图「结束」节点样式
#END rect {
    color: var(--fore-color) !important;
    fill: var(--doc-bg-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5 !important;
    // rx: 15;
    // ry: 15;
}

#END rect+.label div {
    // color: var(--fore-color);
    // font-family: @boldFont;
}

// 自定义：状态机图「初始」状态样式
#INIT circle {
    fill: var(--fore-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 0 !important;
}

#INIT .label div {
    // color: var(--doc-bg-color);
    color: var(--fore-color) !important;
    // font-family: @boldFont;
}

// 与「初始」状态同级的所有矩形节点
#INIT ~ g > rect {
    fill: var(--mermaid-accent-color5-alt) !important;
    stroke: var(--mermaid-accent-color5) !important;
    stroke-width: 3;
    // font-family: @boldFont;
    // rx: 15 !important;
    // ry: 15 !important;
    // border-radius: 15px !important;
}

// 自定义：状态机图「最终」状态节点样式
#FINAL circle {
    fill: none !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5 !important;
}

/* ----- sequeuce diagram 时序图 ----- */

// 角色
.actor {
    stroke: var(--mermaid-accent-color1);
    fill: var(--mermaid-accent-color1-alt);
    font-size: 1em !important;
    stroke-width: 1;
    // rx: 6;
    // ry: 6;
}

// 人物角色
.actor-person {
    fill: var(--doc-bg-color);
}

// 重要系统角色
.actor-key-sys {
    stroke-width: 3;
    font-weight: @fontWeight4Serif;
}

// 外部系统角色
.actor-ext-sys {
    stroke-dasharray: 5 2;
}

// 角色文本
text.actor {
    fill: var(--fore-color);
    stroke: none;
    font-size: 0.85em !important;
    font-family: @boldFont;
}

// 角色生命线
.actor-line {
    stroke: var(--mermaid-accent-color1);
    stroke-width: 1;
}

// .actor-line-person {
//     stroke: var(--mermaid-accent-color4);
// }

// 消息序号
.sequenceNumber {
    fill: var(--doc-bg-color);
    font-weight: @fontWeight;
}
// 消息序号背景
#sequencenumber {
    fill: var(--fore-color);
}

// 实线消息
.messageLine0 {
    stroke-width: 2;
    stroke: var(--fore-color);
}

// 实线箭头
#arrowhead {
    fill: var(--fore-color);
}

// 虚线消息
.messageLine1 {
    stroke-width: 2;
    stroke: var(--fore-color);
}

// 异步消息箭头
#crosshead path {
    fill: var(--fore-color-alt) !important;
    stroke: var(--fore-color) !important;
}

// 消息文本
.messageText {
    fill: var(--fore-color);
    stroke: none;
    // font-family: @textFont;
    font-size: 0.85em !important;
    font-family: @boldFont !important;
    // font-weight: @fontWeight;
    line-height: 2em;
}

.activation0,
.activation1,
.activation2 {
    fill: var(--mermaid-accent-color1-alt) !important;
    stroke-width: 0 !important;
}

// 片断的类型标签背景
.labelBox {
    stroke: none;
    fill: var(--mermaid-accent-color5-alt);
}

// 角标
// .labelText {
//     fill: var(--mermaid-accent-color4);
//     stroke: none;
//     // font-family: @boldFont;
// }
// 片断的类型标签文本
.labelText tspan {
    fill: var(--mermaid-accent-color5);
    font-size: 0.8em !important;
    font-weight: @fontWeight4Serif;
    font-family: @boldFont;
}

// 片断的类型标签文本
// .loopText {
//     fill: var(--mermaid-accent-color4);
//     stroke: none;
//     font-family: @boldFont;
//     font-size: 1em;
// }
.loopText tspan {
    fill: var(--mermaid-accent-color5);
    font-size: 0.85em !important;
    font-family: @boldFont;
}

// 片断的线框
.loopLine {
    stroke-width: 1;
    // stroke-dasharray: 3;
    stroke: var(--mermaid-accent-color5-alt);
}

// 备注背景
.note {
    stroke: var(--mermaid-accent-color6);
    stroke-dasharray: 5;
    fill: var(--mermaid-accent-color6-alt);
}

// 备注文本
// .noteText {
//     fill: var(--fore-color);
//     stroke: none;
//     // font-family: @textFont;
//     // font-size: 1em;
// }
.noteText tspan {
    fill: var(--fore-color);
    stroke: none;
    font-size: 0.85em !important;
    font-family: @textFont;
}

/* ----- state diagram 状态机图 ----- */

g.stateGroup circle {
    fill: var(--fore-color) !important;
    stroke: var(--doc-bg-color) !important;
}
g.stateGroup rect,
g.stateGroup line {
    fill: var(--mermaid-accent-color1-alt) !important;
    stroke: var(--mermaid-accent-color1) !important;
}
g.stateGroup rect[height="7"] {
    fill: var(--fore-color) !important;
    stroke: none !important;
}
.transition {
    stroke: var(--fore-color) !important;
}
g.stateGroup .composit {
    fill: var(--doc-bg-color) !important;
}
g.stateGroup .state-title,
g.stateGroup text {
    fill: var(--fore-color) !important;
    font-family: @boldFont;
    font-size: 0.5em !important;
}

.stateLabel text {
    font-size: 0.5em;
}

g.state-note {
    fill: var(--mermaid-accent-color6-alt);
    stroke: var(--mermaid-accent-color6);
}
// g.state-note text {
//     fill: var(--fore-color);
//     // font-family: @boldFont;
//     font-size: 0.6em;
// }

/* ----- class diagram 类图 ----- */

g.cardinality text,
g.classGroup text,
g.classLabel .label {
    font-family: @codeFont;
    fill: var(--fore-color);
    stroke: none;
}

g.classGroup rect {
  fill: var(--mermaid-accent-color1-alt);
  stroke: var(--mermaid-accent-color1);
}

g.classGroup line {
  stroke: var(--mermaid-accent-color1);
  stroke-width: 1;
}

g.classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: var(--mermaid-accent-color1-alt);
  opacity: 0.5;
}

.relation {
  stroke: var(--fore-color);
  stroke-width: 1;
  fill: none;
}

.composition,
#compositionStart,
#compositionEnd,
.aggregation,
#aggregationStart,
#aggregationEnd,
#dependencyStart,
#dependencyEnd,
#extensionStart,
#extensionEnd {
  fill: var(--fore-color);
  stroke:  var(--fore-color);
  stroke-width: 1;
}

div.mermaidTooltip {
    position: absolute;
    text-align: center;
    max-width: 200px;
    padding: 2px;
    background: var(--fore-color-alt);
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    pointer-events: none;
    z-index: 100;
}

/* ----- gantt diagram 甘特图 ----- */

.section {
    stroke: none;
}

.section0 {
    fill: var(--fore-color-alt);
}

.section2 {
    fill: var(--fore-color-alt);
}

.section1,
.section3 {
    fill: @foreColorLightFade3;
}

.sectionTitle0,
.sectionTitle1,
.sectionTitle2,
.sectionTitle3 {
    fill: var(--fore-color);
}

.sectionTitle {
    text-anchor: start;
    font-size: 0.8em;
    line-height: 2em;
}

.grid .tick {
    stroke: var(--fore-color-alt);
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.today {
    fill: none;
    stroke: var(--mermaid-accent-color4);
    stroke-width: 3px;
}

.task {
    stroke-width: 2;
}

.taskText {
    text-anchor: middle;
    font-size: 0.8em;
    line-height: 2em;
    font-family: @boldFont;
}

.taskTextOutsideRight {
    fill: var(--fore-color);
    font-family: @boldFont;
    text-anchor: start;
}

.taskTextOutsideLeft {
    fill: var(--fore-color);
    font-family: @boldFont;
    text-anchor: end;
}

/* 当前的任务 */

.active0,
.active1,
.active2,
.active3 {
    fill: var(--mermaid-accent-color1-alt);
    stroke: var(--mermaid-accent-color1);
}

.activeText0,
.activeText1,
.activeText2,
.activeText3 {
    fill: var(--mermaid-accent-color1) !important;
}

/* 已完成的任务 */

.done0,
.done1,
.done2,
.done3 {
    stroke: none;
    fill: var(--mermaid-accent-color1-alt);
    stroke-width: 2;
    stroke-dasharray: 2;
}

/* 未来的任务 */

.task0,
.task1,
.task2,
.task3 {
    fill: var(--doc-bg-color);
    stroke: var(--mermaid-accent-color1);
    stroke-dasharray: 2;
}

.taskText0,
.taskText1,
.taskText2,
.taskText3 {
    fill: var(--fore-color);
}

.taskTextOutside0,
.taskTextOutside2 {
    fill: var(--fore-color);
}

.taskTextOutside1,
.taskTextOutside3 {
    fill: var(--fore-color);
}

.doneText0,
.doneText1,
.doneText2,
.doneText3 {
    fill: var(--fore-color) !important;
}

/* 当前关键路径的任务 */

.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
    stroke: var(--mermaid-accent-color4);
    fill: var(--mermaid-accent-color4-alt);
    stroke-width: 2;
}

.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
    fill: var(--mermaid-accent-color4) !important;
}

/* 已完成的关键路径任务 */

.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
    stroke: none;
    fill: var(--mermaid-accent-color4-alt);
    stroke-width: 2;
    cursor: pointer;
    shape-rendering: crispEdges;
}

/* 未来的关键路径任务 */

.crit0,
.crit1,
.crit2,
.crit3 {
    stroke: var(--mermaid-accent-color4);
    fill: var(--doc-bg-color);
    stroke-width: 2;
    stroke-dasharray: 2;
}

.critText0,
.critText1,
.critText2,
.critText3 {
    fill: var(--fore-color);
}

.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
    fill: var(--fore-color) !important;
}

/* 标题 */
.titleText {
    text-anchor: middle;
    font-size: 1.5em;
    line-height: 2em;
    font-family: @boldFont;
    font-weight: @fontWeight4Serif;
    fill: var(--fore-color);
}

/**************************************
* 重定义Typora原生样式
**************************************/

#write {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px 0 10px;
    // overflow-x: auto;
    // transition: all 0.3s ease-in-out;
}

// VLOOK 未加载完成前的样式
.mdx-before-write + #write {
    filter: grayscale(50%) opacity(0.5);
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

// 代码块相关样式
#write pre.ty-contain-cm {
    padding: 0;
    border-radius: 18px;
}

.CodeMirror-sizer {
    background-color: var(--doc-bg-color);
    // border-radius: 14px;
}

.CodeMirror pre {
    padding: 0 10px;
}

.CodeMirror-line:hover {
    background-color: var(--doc-bg-color-alt);
    // box-shadow: 0 1px 0 0 @aLineColor inset, 0 -1px 0 0 @aLineColor inset;
// 性能优化    transition: all 0.3s ease-in-out;
}

.CodeMirror.cm-s-inner {
    border-radius: 16px;
}

.CodeMirror div.CodeMirror-cursor {
    border-color: var(--cm-CodeMirror-cursor);
    // border-right-width: 1px;
}

.cm-s-inner .cm-variable,
.cm-s-inner .cm-operator,
.cm-s-inner .cm-property {
    color: var(--cm-variable);
}

.cm-s-inner .cm-variable-2 {
    color: var(--cm-variable-2);
}

.cm-s-inner .cm-variable-3 {
    color: var(--cm-variable-3);
}

.cm-s-inner .cm-keyword {
    color: var(--cm-keyword);
}

.cm-s-inner .cm-tag {
    color: var(--cm-tag);
}

.cm-s-inner .cm-attribute {
    color: var(--cm-attribute);
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid #b8bfc6;
    z-index: 3;
}

.cm-s-inner .cm-string {
    color: var(--cm-string);
}

.cm-s-inner .cm-string-2 {
    color: var(--cm-string-2);
}

.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: var(--cm-comment);
}

.cm-s-inner .cm-header,
.cm-s-inner .cm-def,
.cm-s-inner.cm-header,
.cm-s-inner.cm-def {
    color: var(--cm-header);
}

.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
    color: var(--cm-quote);
}

.cm-s-inner .cm-hr {
    color: var(--cm-hr);
}

.cm-s-inner .cm-link {
    color: var(--cm-link);
}

.cm-s-inner .cm-negative {
    color: var(--cm-negative);
}

.cm-s-inner .cm-positive {
    color: var(--cm-positive);
}


.cm-s-inner .cm-meta,
.cm-s-inner .cm-qualifier {
    color: var(--cm-meta);
}

.cm-s-inner .cm-builtin {
    color: var(--cm-bulidin);
}

.cm-s-inner .cm-bracket {
    color: var(--cm-bracket);
}

.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
    color: var(--cm-atom);
}

.cm-s-inner .cm-number {
    color: var(--cm-number);
}

/* 数学公式 */
.MathJax_SVG,
.MathJax_SVG_Display {
    border: 2px solid var(--table-border-color);
    border-radius: 16px;
    padding: 0.3em 0.3em;
// 性能优化    transition: all 0.3s ease-in-out;
}

.MathJax_SVG:hover,
.MathJax_SVG_Display:hover {
    border-color: @aLineColor;
}

.MathJax_SVG:active,
.MathJax_SVG_Display:active {
    background-color: var(--doc-bg-color);
    transform: scale(1.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.MathJax_SVG:focus,
.MathJax_SVG_Display:focus {
    box-shadow: none;
    outline: none;
}

.MathJax_SVG_Display > .MathJax_SVG {
    border: none;
}

.MathJax_SVG g text {
    // font-family: @textFont;
    color: var(--fore-color);
}

/* md 系统样式 */
.md-toc-inner {
    text-decoration: none;
    box-shadow: none;
}

// .md-toc-h1,
// .md-toc-h2,
// .md-toc-h3,
// .md-toc-h4,
// .md-toc-h5,
.md-toc-item {
    color: var(--fore-color);
    font-family: @boldFont;
    font-size: 1em;
    margin-left: 10px;
    margin-right: 10px;
    padding-right: 5px;
    border-radius: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
// 性能优化    transition: all 0.3s ease-in-out;
}

// .md-toc-h1::before,
// .md-toc-h2::before,
// .md-toc-h3::before,
// .md-toc-h4::before,
// .md-toc-h5::before,
.md-toc-item::before {
    color: var(--toc-header-num-color);
    padding-left: 5px;
}

.md-toc-item:hover {
    color: @buttonForeHoverColor;
    background-color: @aHoverColor;
    transform: translateY(-2px);
    // box-shadow: @buttonShadow;
}

.md-toc-item:hover::before {
    color: @buttonForeHoverColor;
}

.md-toc-item:active {
    background-color: @aActiveColor;
    box-shadow: none;
    transform: none;
}

// .md-toc-item:active::before {
//     color: @aActiveColor;
//     // transition: all 0.3s ease-in-out;
// }

.md-toc,
.mdx-toc {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    border-radius: 0;
    line-height: 2;
}

.md-toc-h1 {
    font-size: 1em;
}

.md-toc-h2 {
    font-size: 1em;
}

.md-toc-h3,
.md-toc-h4,
.md-toc-h5 {
    font-size: 1em;
}

// .md-toc-h1 a,
// .md-toc-h2 a,
// .md-toc-h3 a,
// .md-toc-h4 a,
// .md-toc-h5 a,
.md-toc-item a {
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: 0;
}

// .md-toc-h1 a:hover,
// .md-toc-h2 a:hover,
// .md-toc-h3 a:hover,
// .md-toc-h4 a:hover,
// .md-toc-h5 a:hover,
.md-toc-item a:hover {
    //, .md-toc-h6 a:hover
    color: @buttonForeHoverColor !important;
    background-color: @transparencyColor0;
    box-shadow: none;
    text-decoration: none;
    border: 0;
// 性能优化    transition: all 0.3s ease-in-out;
}

// .md-toc-item > a {
//     color: var(--fore-color);
// }

// .md-toc-item:hover > a,
// .md-toc-item a:hover {
//     color: var(--a-line-color) !important;
//     box-shadow: none;
// // 性能优化    transition: all 0.3s ease-in-out;
// }

// .md-toc-item:active > a,
// .md-toc-item a:active {
//     color: var(--a-active-color);
// // 性能优化    transition: all 0.3s ease-in-out;
// }

#svg-figure-content {
    margin: 5px;
    padding: 5px;
    border-radius: 0.3em;
    cursor: pointer;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}


sup.md-footnote {
    background-color: inherit;
}

sup.md-footnote > a {
    color: @aLineColor !important;
    margin-left: 0.5em;
    margin-right: 0.5em;
    box-shadow: none;
    border-bottom: none;
}

sup.md-footnote > a:hover {
    //   color: var(--a-line-color);
    box-shadow: 0 -0.5em 0 fade(@aLineColor, 30%) inset;
    border-bottom: 0;
}

.footnote-line > a:not(.reversefootnote) {
    color: var(--fore-color);
}

kbd {
    font-family: @codeFont;
    font-size: 0.85em;
    font-weight: @fontWeight;
    border-radius: 0.4em;
    margin: 0 0.3em;
    padding: 0.2em 0.5em 0.1em 0.5em;
    border: 0;
    color: var(--doc-bg-color);
    background-color: var(--fore-color);
    box-shadow: 0 0.2em 0 0 var(--fore-color-alt);
}

// task list - 1
ul > .md-task-list-item {
    list-style-type: decimal !important;
}

// task list - 2
ul > li > ul > .md-task-list-item {
    list-style-type: lower-alpha !important;
}

// task list - 3
ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: disc !important;
}

// task list - 4
ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: lower-roman !important;
}

// task list - 5
ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: circle !important;
}

// task list - 6
ul > li > ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: square !important;
}

// task list checkbox
.md-task-list-item > input {
    margin-left: -0.5em !important;
    margin-top: 0.3em !important;
}

// task list text
.md-task-list-item > p {
    margin-left: 1.2em !important;
    margin-top: 0;
    margin-bottom: 0;
}

li >  :first-child,
li p {
    margin-top: 0;
    margin-bottom: 0;
}

// 段落后紧跟有序、无序列表时，减少其行距间隔
p + ul,
p + ol {
    margin-top: -1em;
}
// 但在引用内则取消覆盖以上样式
blockquote p + ul,
blockquote p + ol {
    margin-top: 0;
}
// 在列表内，段落后紧跟有序、无序列表时，保持原行距间隔
li > p + ul {
    margin-top: 0;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// --------------------
// 非衬线字体集
.mdx-font-title-sans {
    font-family: @sansFont !important;
}

.mdx-font-header-sans {
    font-family: @sansFont !important;
}

.mdx-font-text-sans {
    font-family: @sansFont !important;
}

.mdx-font-bold-sans {
    font-family: @sansFont !important;
}

.mdx-font-code-sans {
    font-family: @monoSansFont !important;
}

// --------------------
// 衬线字体集
.mdx-font-title-serif {
    font-family: @serifBigger !important;
}

.mdx-font-header-serif {
    font-family: @serifBigger !important;
}

.mdx-font-text-serif {
    font-family: @serifFont;
}

.mdx-font-bold-serif {
    font-family: @serifBoldFont !important;
}

.mdx-font-code-serif {
    font-family: @monoSerifFont !important;
}

.mdx-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    //   background: radial-gradient(circle at calc(~"var(--spotlightX) * 1px") calc(~"var(--spotlightY) * 1px"), rgba(255, 255, 255, 0) calc(~"var(--spotlightR) * 1px"), rgba(0, 0, 0, 0.7) calc(~"var(--spotlightR) * 1px + 1px"));
    background-size: cover;
    pointer-events: none;
    z-index: 4000;
}

.mdx-tool-tips,
.mdx-info-tips {
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 0.5em 1em;
    text-align: center;
    white-space: pre-wrap;
    border-radius: 16px;
    border: 1px var(--table-border-color) solid;
    font-family: @boldFont;
    color: var(--tips-bg-color-inset);
    background-color: var(--tips-bg-color);
    z-index: 3000;
}

// .mdx-tool-tips {
//     color: var(--tips-bg-color);
//     background-color: var(--tips-bg-color-inset);
// }

.mdx-tool-tips {
    // border-top: 2px solid @aLineColor;
    border-top: 0;
    box-shadow: 0 2px 0 0 @aLineColor inset, 0 3px 20px rgba(0, 0, 0, 0.3), @contrastBorder;;
    text-align: left;
    white-space: pre;
}

.mdx-tool-tips a,
.mdx-info-tips a {
    color: var(--tips-bg-color-inset) !important;
    font-weight: @fontWeight;
}

.mdx-content-expander {
    font-family: @boldFont;
    font-weight: @fontWeight;
    height: 100px;
    margin-top: -120px;
    background: linear-gradient(0deg, var(--doc-bg-color) 10px, var(--doc-bg-color-transparent));
    border-radius: 0 0 16px 16px;
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 10;
}

.mdx-content-expander > .mdx-btn {
    margin-top: 70px;
    width: 180px;
    height: 30px;
    border-radius: 16px;
    background-color: @buttonBgColor;
    display: inline-flex;
}

.mdx-doc-logo {
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: url(@themeLogo);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

.mdx-welcome-screen {
    cursor: wait;
    position: fixed;
    color: @buttonForeColor;
    // background-color: @themeBgColor;
    background: linear-gradient(@themeBgColorDark 0%, @buttonBgColor 50%, @buttonBgColor);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: @titleFont;
    font-size: 1.5em;
    overflow: auto;
    display: none;
    z-index: 4000;
}

// 文本呼吸动画
@keyframes breathe-text {
    0% {
      opacity: 1;
      transform: scale(1.05);
    }
    100% {
      opacity: 0.8;
      transform: scale(0.99);
    }
}

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.05);
        filter: brightness(120%);
    }
    100% {
        opacity: 0.8;
        transform: scale(0.97);
        filter: brightness(100%);
    }
}

.mdx-welcome-screen-tips {
    padding: 20px 20px 10px 20px;
    animation: 1s breathe-text infinite alternate;
}

.mdx-welcome-screen-tips > div {
    text-align: center;
    line-height: 1;
    margin-bottom: 1em;
}

.mdx-welcome-screen-loading {
    cursor: not-allowed;
    padding-left: 1em;
    padding-right: 1em;
    color: @themeForeColor;
    // background-color: @themeBgColor;
    border: 1px solid @themeForeColorFade;
    font-family: @boldFont;
    font-weight: normal;
    display: inline-block;
    border-radius: 1em;
    margin-bottom: 2em;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn-welcome-screen-done {
    cursor: pointer;
    border: none;
    font-size: 1.2em;
    font-weight: @fontWeight;
    color: @buttonForeHoverColor;
    background-color: @aLineColor;
    animation: 1s breathe-button infinite alternate;
}

.mdx-btn-welcome-screen-done:hover {
    color: @aLineColor;
    background-color: @buttonForeHoverColor;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
// 性能优化    transition: all 0.3s ease-in-out;
    transform: translateY(-2px);
}

.mdx-btn-welcome-screen-done:active {
    color: @buttonForeHoverColor;
    background-color: @aLineColor;
    transform: none;
    box-shadow: none;
// 性能优化    transition: all 0.3s ease-in-out;
}

// 用于列表项、段落聚焦模式
.mdx-current-blockfocus-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: 16px;
}

.md-diagram-panel svg {
    width: auto;
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
.md-diagram-panel svg[viewBox^="-"],
.mdx-figure-content svg[viewBox^="-"] {
    padding-bottom: 8px;
}

// .md-diagram-panel svg,
.mdx-figure-content svg {
    width: 100%;
}

.mdx-blockquote-folder {
    cursor: pointer;
// 性能优化    transition: all 0.3s ease-in-out;
}

// .mdx-blockquote-folder:hover {
//     color: @aHoverColor;
//     // text-shadow: @buttonShadow;
//     transform: translateY(-2px);
// }

// .mdx-blockquote-folder:active {
//     color: @aActiveColor;
//     // text-shadow: none;
//     transform: none;
// }

// .mdx-blockquote-folder small {
//     color: @aLineColor;
//     font-family: @boldFont;
//     border: 1px solid @aLineColor;
//     border-radius: 8px;
//     margin-left: 1em;
//     padding: 0.1em 0.5em;
//     font-size: 0.85em;
// }

.mdx-toc-panel {
    background-color: var(--doc-bg-color-alt);
    border-radius: 16px;
    cursor: default;
    display: block;
    left: var(--vlook-toc-box-hidden-left);
    top: 10px;
    bottom: 40px;
    width: var(--vlook-toc-box-width);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.mdx-toc-panel-float {
    top: 10px;
    bottom: 40px;
    box-shadow: 0 0 0 1px fade(@themeBgColor, 30%) inset, 0 3px 20px rgba(0, 0, 0, 0.3);
}

.mdx-toc-panel-block {
    top: 60px;
    bottom: 10px;
    box-shadow: 0 0 0 1px fade(@themeBgColor, 30%) inset, 0 3px 20px rgba(0, 0, 0, 0.3);
}

.mdx-toc-panel-header {
    color: @foreColorLight;
    font-family: @boldFont;
    font-size: 1.2em;
    // width: 100%;
    height: 70px;
    padding: 10px 0 0 0;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 50px, var(--doc-bg-color-alt-transparent));
    left: 2px;
    right: 2px;
    top: 2px;
    position: absolute;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    z-index: 10;
}

.mdx-toc-panel-title {
    text-align: center;
    position: absolute;
    border-radius: 8px;
    left: 10px;
    right: 10px;
    // width: 100%;
    // height: 30px;
    // line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1em;
    font-family: @boldFont;
    font-weight: @fontWeight;
    color: var(--a-color);
    cursor: pointer;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-toc-panel-title:hover {
    color: @buttonForeHoverColor;
    background-color: @aHoverColor;
    transform: translateY(-2px);
    box-shadow: @buttonShadow;
}

.mdx-toc-panel-title:active {
    background-color: @aActiveColor;
    box-shadow: none;
    transform: none;
}

.mdx-toc-panel-body-scroll {
    width: 100%;
    height: 100%;
    padding: 0;
    padding-top: 40px;
    padding-bottom: 10px;
    border-radius: 16px;
    overflow: auto;
    overflow-y: hidden;
}

.mdx-toc-panel-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 10px 0;
    overflow-y: scroll;
}

.mdx-toc-panel-footer {
    // font-size: 0.8em;
    // font-family: @boldFont;
    //   width: 100%;
    height: 30px;
    line-height: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    padding: 0;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 10px, var(--doc-bg-color-alt-transparent));
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    position: absolute;
    z-index: 10;
}

.mdx-copyright {
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font-size: 0.85em;
    font-family: @boldFont;
    position: absolute;
    // text-shadow: 0 0 5px #000;
}
.mdx-copyright,
.mdx-copyright a {
    color: #C0C4C8 !important;
}


// .mdx-copyright,
// .mdx-copyright > a {
//     color: #FFFFFF !important;
// }

.mdx-float-card {
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3), @contrastBorder;
}

.mdx-footer-note-panel {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: -200px;
    height: 200px;
    border-radius: 16px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    background-color: var(--doc-bg-color-alt);
    display: none;
    z-index: 2100;
}

.mdx-footer-note-panel > a {
    color: var(--fore-color);
}

.mdx-footer-note-panel-header {
    height: 30px;
    top: 2px;
    left: 2px;
    right: 2px;
    position: absolute;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 5px, var(--doc-bg-color-alt-transparent));
    border-radius: 16px;
}

.mdx-footer-note-panel-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

.mdx-footer-note-panel-all {
    font-weight: @fontWeight;
    height: 60px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    line-height: 70px;
    bottom: 0;
    padding: 0 20px;
    margin: 2px;
    border-radius: 16px;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 35px, var(--doc-bg-color-alt-transparent));
    position: absolute;
}

.mdx-toolbar {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    left: 10px;
    top: 10px;
    width: var(--vlook-toc-box-width);
    height: 50px;
    position: fixed;
    background-color: @buttonBgColor;
    // background-color: fade(@themeBgColor, 75%);
    // transition: all 0.3s ease-in-out;
    display: none;
    z-index: 100;
}

// .mdx-toolbar:hover {
//     opacity: 1;
// // 性能优化    transition: all 0.3s ease-in-out;
// }

.mdx-btn-outline {
    display: flex;
    justify-content: center;
    align-items: center;
    color: @docBgColorLight;
    // background-color: @foreColorLight;
    cursor: pointer;
    float: left;
    width: 30px;
    height: 30px;
    padding-top: 0;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    visibility: visible;
}

.mdx-header-current {
//   background: linear-gradient(90deg, var(--code-bg-color-transparent) 75%, @themeBgColorFade);
    font-weight: @fontWeight;
    color: @headerColor;
    background-color: var(--doc-bg-color);
    box-shadow: 0 0 0 2px @themeBgColorFade inset;
}

.mdx-header-current::before {
    // font-weight: normal;
    color: @headerColor;
}

// .mdx-header-current a {
// }

// .mdx-header-current a::after {}

.mdx-folder {
    color: @foreColorLightAlt;
    float: left;
    width: 20px;
    text-align: center;
}

.mdx-folder:hover {
    color: @aActiveColor;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
    // font-size: 0.85em;
    width: 40px;
    height: 30px;
    border-radius: 8px;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn-hover:hover {
    background-color: @aHoverColor;
    box-shadow: @buttonShadow;
    color: @buttonForeHoverColor;
    transform: translateY(-2px);
}

.mdx-btn-hover:hover > svg > use {
    fill: @buttonForeHoverColor;
}

.mdx-btn-float {
    background-color: @buttonBgColor;
    // backdrop-filter: blur(15px);
    // -webkit-backdrop-filter: blur(15px);
}

// .mdx-btn-leave {
// // 性能优化    transition: all 0.3s ease-in-out;
//     transform: none;
// }

.mdx-btn:active {
    background-color: @aActiveColor;
    box-shadow: none;
    transform: none;
}

// .mdx-btn-nav-back {
//     margin-top: 10px;
//     margin-left: 10px;
//     float: left;
//     visibility: hidden;
//     display: none;
// }

// .mdx-btn-nav-forward {
//     margin-top: 10px;
//     margin-left: 10px;
//     float: left;
//     visibility: hidden;
//     display: none;
// }

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.mdx-audio-mini-control-loading {
    animation: loading-circle 2s linear infinite;
}

.mdx-audio-mini-control-disabled {
    color: var(--fore-color);
    background-color: #B0B4B8;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    box-shadow: 0 0 1px fade(@buttonForeHoverColor, 70%);
    display: inline-block;
    cursor: not-allowed;
    // transform: rotate(90deg);
}

.mdx-audio-mini-control {
    color: @buttonForeColor;
    background-color: @buttonBgColor;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    box-shadow: 0 0 1px fade(@buttonForeHoverColor, 70%);
    display: inline-block;
    cursor: pointer;
    // transform: rotate(90deg);
}

.mdx-audio-mini-control:hover {
    background-color: @aHoverColor;
    box-shadow: @buttonShadow;
    color: @buttonForeHoverColor;
    transform: translateY(-2px);
    // transform: translateY(-2px) rotate(90deg);
}

.mdx-audio-mini-control:active {
    background-color: @aActiveColor;
    // transform: rotate(90deg);
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.mdx-audio-mini-control-playing {
    // box-shadow: 0 0 0 3px @aHoverColor inset;
    animation: 500ms breathe-circle infinite alternate;
}

.mdx-chapter-nav {
    color: @buttonForeColor;
    background-color: @buttonBgColor;
    // background-color: fade(@buttonBgColor, 75%);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    top: -50px;
    left: calc(~"var(--vlook-toc-box-width) + 30px");
    right: 10px;
    height: 50px;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
    // transition: all 0.3s ease-in-out;
}

.mdx-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: 16px;
    // background: @themeBgColor linear-gradient(to left, @themeBgColor, var(--doc-bg-color-transparent));
}
// 无特效（effect=0）时使用的样式
.mdx-chapter-nav-prev-noeffect-hover,
.mdx-chapter-nav-prev-effect-hover {
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    text-shadow: @buttonShadow;
    transform: translateY(-2px);
}
.mdx-chapter-nav-prev-noeffect-hover > svg > use,
.mdx-chapter-nav-prev-effect-hover > svg > use {
    fill: @buttonForeHoverColor;
}
.mdx-chapter-nav-prev-noeffect-hover > .mdx-chapter-nav-prev-text,
.mdx-chapter-nav-prev-effect-hover > .mdx-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev-effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: 16px;
    opacity: 0;
    z-index: -1;
    transition: all 200ms ease-in;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev-effect-hover::before {
    opacity: 1;
    // background: linear-gradient(to right, @aHoverColor, fade(@aHoverColor, 0%));
    // background-color: @aHoverColor;
// 性能优化    transition: all 0.3s ease-in-out;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev-noeffect:active,
.mdx-chapter-nav-prev-effect:active,
.mdx-chapter-nav-prev-effect:active::before {
    // filter: saturate(50%);
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
    box-shadow: none;
    transform: none;
  // background: linear-gradient(to right, @aActiveColor, fade(@aActiveColor, 0%));
    // background-color: @aActiveColor;
    // background: none;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-chapter-nav-prev-text {
    top: 0;
    left: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @boldFont;
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    display: block;
}

.mdx-chapter-nav-current {
    font-family: @boldFont;
    font-size: 1.4em;
    font-weight: @fontWeight;
    text-align: center;
    line-height: 50px;
    margin-left: 220px;
    margin-right: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 50px;
    // background: @themeBgColor linear-gradient(90deg, @themeBgColor, var(--doc-bg-color-transparent), @themeBgColor);
    cursor: pointer;
    display: block;
}
// 无特效（effect=0）时使用的样式
.mdx-chapter-nav-current-noeffect-hover,
.mdx-chapter-nav-current-effect-hover {
    text-shadow: @buttonShadow;
    color: @buttonForeHoverColor;
    transform: translateY(-2px);
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-current-effect::before {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
    transition: all 200ms ease-in;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-current-effect-hover::before {
    opacity: 1;
    // background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    // background-color: @aHoverColor;
// 性能优化    transition: all 0.3s ease-in-out;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-current-noeffect:active,
.mdx-chapter-nav-current-effect:active,
.mdx-chapter-nav-current-effect:active::before {
    // filter: saturate(50%);
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
    transform: none;
  // background: linear-gradient(90deg, fade(@aActiveColor, 0%), @aActiveColor, fade(@aActiveColor, 0%));
    // background-color: @aActiveColor;
    // background: none;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: 16px;
    // background: @themeBgColor linear-gradient(to right, @themeBgColor, var(--doc-bg-color-transparent));
}
// 无特效（effect=0）时使用的样式
.mdx-chapter-nav-next-noeffect-hover,
.mdx-chapter-nav-next-effect-hover {
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    text-shadow: @buttonShadow;
    transform: translateY(-2px);
}
.mdx-chapter-nav-next-noeffect-hover > svg > use,
.mdx-chapter-nav-next-effect-hover > svg > use {
    fill: @buttonForeHoverColor;
}
.mdx-chapter-nav-next-noeffect-hover > .mdx-chapter-nav-next-text,
.mdx-chapter-nav-next-effect-hover > .mdx-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next-effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    border-bottom-right-radius: 16px;
    opacity: 0;
    z-index: -1;
    transition: all 200ms ease-in;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next-effect-hover::before {
    opacity: 1;
    // background: linear-gradient(to left, @aHoverColor, fade(@aHoverColor, 0%));
    // background-color: @aHoverColor;
// 性能优化    transition: all 0.3s ease-in-out;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next-noeffect:active,
.mdx-chapter-nav-next-effect:active,
.mdx-chapter-nav-next-effect:active::before {
    // filter: saturate(50%);
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
    box-shadow: none;
    transform: none;
      // background: linear-gradient(to left, @aActiveColor, fade(@aActiveColor, 0%));
    // background-color: @aActiveColor;
    // background: none;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-chapter-nav-next-text {
    top: 0;
    right: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @boldFont;
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    display: block;
}

.mdx-btn-fullscreen {
    margin-top: 10px;
    margin-left: 5px;
    float: left;
    display: none;
}

.mdx-btn-color-scheme {
    margin-top: 10px;
    margin-right: 5px;
    float: right;
}

.mdx-btn-font-style {
    margin-top: 10px;
    margin-right: 5px;
    float: right;
}

.mdx-btn-figure-viewer {
    margin-top: 10px;
    margin-left: 5px;
    visibility: hidden;
    float: left;
}

.mdx-btn-spotlight {
    margin-top: 10px;
    margin-right: 5px;
    float: right;
}

.mdx-btn-print {
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 30px;
    float: right;
}

.mdx-figure-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    // background-color: rgba(255, 255, 255, 0.9); // 启用 blur 特效时的建议值
    position: fixed;
    display: none;
    z-index: 2200;
}

.mdx-btn-figure-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
}

.mdx-btn-figure-prev {
    left: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: 16px;
    position: absolute;
    bottom: 10px;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn-figure-next {
    right: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: 16px;
    position: absolute;
    bottom: 10px;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn-figure-hover {
    fill: @aLineColor !important;
}

.mdx-btn-figure-active {
    fill: @aActiveColor !important;
}

.mdx-btn-close-figure-viewer {
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    align-items: normal;
    color: #FFFFFF;
    cursor: pointer;
    // font-size: 0.8em;
    background-color: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-btn-close-figure-viewer:hover {
    background-color: @aHoverColor;
    box-shadow: @buttonShadow;
    transform: translate(-2px, 2px) ;
}

.mdx-btn-close-figure-viewer:active {
    background-color: @aActiveColor;
    box-shadow: none;
    transform: none;
}

.mdx-btn-open-in-new-tab {
    border-radius: 16px 0 16px 0;
    box-shadow: @contrastBorder;
    background-color: @buttonBgColor;
    // background-color: fade(@buttonBgColor, 75%);
    position: absolute;
    // display: none;
    visibility: hidden;
    z-index: 50;
}

.mdx-btn-copy-code-block {
    border-radius: 0 16px 0 16px;
    box-shadow: @contrastBorder;
    background-color: @buttonBgColor;
    // background-color: fade(@buttonBgColor, 75%);
    position: absolute;
    // display: none;
    visibility: hidden;
    z-index: 50;
}

// .mdx-figure-content svg,
// .mdx-figure-content img,
img,
.mdx-figure,
.md-diagram-panel svg {
    background: @figureBackgroundLight;
    background-repeat: repeat;
    background-position: left top;
    border-radius: 16px;
    padding: 0;
    border: 2px solid var(--table-border-color);
    display: block;
// 性能优化    transition: all 0.3s ease-in-out;
}

.md-diagram-panel {
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 0;
}  

.mdx-clickable-hover {
    border-color: @aHoverColor !important;
// 性能优化    transition: all 0.3s ease-in-out;
}

// img:hover,
// .mdx-figure:hover,
// table:hover,
.mdx-OINTable-hover {
    border-color: @aHoverColor !important;
    box-shadow: @buttonShadowNoblur;
    transform: translateY(-2px);
// 性能优化    transition: all 0.3s ease-in-out;
}

.mdx-OINTable-hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.mdx-img-invert-in-dark {
    filter: var(--vlook-invert-in-dark);
    border-color: @imgInvertInDarkBorderColor !important;
}

// 指定在 Dark Mode 时反转的图片的hover样式（先使用反色，这样在反转时则能保持与色一致）
.mdx-img-invert-in-dark:hover {
    border-color: rgb(255 - red(@aHoverColor),
            255 - green(@aHoverColor),
            255 - blue(@aHoverColor)) !important;
}

// Light 模式的插图背景
.mdx-figure-bg-light {
    background: @figureBackgroundLight !important;
}

// Dark 模式的插图背景
.mdx-figure-bg-dark {
    background: @figureBackgroundDark !important;
}

.mdx-figure-content {
    margin: 5px;
    padding: 5px;
    cursor: pointer;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--fore-color);
}

.mdx-figure-page-num {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.mdx-figure-caption {
    display: inline-block;
    border-radius: 16px;
    background-color: var(--doc-bg-color-alt);
// 性能优化    transition: all 0.3s ease-in-out;
}

// .mdx-figure-caption:hover
// .mdx-figure-caption-hover {
//     background-color: fade(@aLineColor, 20%);
// }

.mdx-figure-caption > p {
    color: var(--fore-color);
    font-size: 0.85em;
    font-family: @boldFont;
    margin: 5px 10px 5px 10px;
    width: auto !important;
}

.mdx-figure-caption hr {
    border-bottom: 2px solid @foreColorLightAlt;
    margin: 0.5em auto;
}

use.mdx-button-ico-light {
    fill: @buttonForeColor;
}

use.mdx-button-ico-dark {
    fill: @buttonBgColor;
}

// 折叠按钮样式
use.mdx-folder-ico,
use.mdx-folder2-ico {
    fill: @headerColor;
// 性能优化    transition: all 0.3s ease-in-out;
}

use.mdx-folder-ico:hover {
    fill: @buttonForeHoverColor !important;
}
use.mdx-folder-ico:active {
    fill: @transparencyColor3 !important;
}

use.mdx-folder2-ico:hover {
    fill: @aHoverColor;
}
use.mdx-folder2-ico:active {
    fill: @aActiveColor;
}

.mdx-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    // background-color: rgba(255, 255, 255, 0.9); // 启用 blur 特效时的建议值
    display: none;
    z-index: 1000;
}

// 毛玻璃计算会影响影响（特别是 Windows 平台），目前建议关闭
.mdx-backdrop-blurs {
    // backdrop-filter: blur(15px);
    // -webkit-backdrop-filter: blur(15px);
}

// 标签式公用样式（风格2）
.mdx-tag-c1,
.mdx-tag-c2,
.mdx-tag-c3,
.mdx-tag-c4,
.mdx-tag-c5,
.mdx-tag-c6 {
    // font-family: @boldFont;
    // font-weight: @fontWeight;
    font-size: 0.9em;
    color: @docBgColorLight;
    padding: 0.1em 0.5em;
    margin: 0 0.1em;
    border-radius: 1em;
    white-space: pre;
}

.mdx-tag-c1 {
    background-color: var(--accent-color1);
    box-shadow: 0 0 0 1px var(--accent-color1-light) inset;
}

.mdx-tag-c2 {
    background-color: var(--accent-color2);
    box-shadow: 0 0 0 1px var(--accent-color2-light) inset;
}

.mdx-tag-c3 {
    background-color: var(--accent-color3);
    box-shadow: 0 0 0 1px var(--accent-color3-light) inset;
}

.mdx-tag-c4 {
    background-color: var(--accent-color4);
    box-shadow: 0 0 0 1px var(--accent-color4-light) inset;
}

.mdx-tag-c5 {
    background-color: var(--accent-color5);
    box-shadow: 0 0 0 1px var(--accent-color5-light) inset;
}

.mdx-tag-c6 {
    background-color: var(--accent-color6);
    box-shadow: 0 0 0 1px var(--accent-color6-light) inset;
}

// 双标签样式右边公共样式（风格1/2）
.mdx-tag-name1,
.mdx-tag-name2,
.mdx-tag-name3,
.mdx-tag-name4,
.mdx-tag-name5,
.mdx-tag-name6 {
    // font-family: @boldFont;
    // font-weight: @fontWeight;
    margin-right: 0;
    border-radius: 1em;
    color: @docBgColorLight;
    padding: 0.1em 1.8em 0.1em 0.5em;
    margin: 0 0.1em;
    font-size: 0.9em;
    white-space: pre;
}

.mdx-tag-value1,
.mdx-tag-value2,
.mdx-tag-value3,
.mdx-tag-value4,
.mdx-tag-value5,
.mdx-tag-value6 {
    // font-family: @boldFont;
    // font-weight: @fontWeight;
    border-radius: 1em 1em 1em 0;
    padding: 0.1em 0.5em;
    margin: 0 0.1em 0.1em -1.5em;
    color: @docBgColorLight;
    background: var(--code-name-bg-color);
    box-shadow: 0 0 0 1px var(--code-name-shadow-color) inset;
    font-size: 0.9em;
    white-space: pre;
}

// 双标签样式右边右边值风格2-样式1
.mdx-tag-name1 {
    background-color: var(--accent-color1);
    box-shadow: 0 0 0 1px var(--accent-color1-light) inset;
}

.mdx-tag-value1 {
}

// 双标签样式右边右边值风格2-样式2
.mdx-tag-name2 {
    background-color: var(--accent-color2);
    box-shadow: 0 0 0 1px var(--accent-color2-light) inset;
}

.mdx-tag-value2 {
}

// 双标签样式右边右边值风格3-样式3
.mdx-tag-name3 {
    background-color: var(--accent-color3);
    box-shadow: 0 0 0 1px var(--accent-color3-light) inset;
}

.mdx-tag-value3 {
}

// 双标签样式右边右边值风格2-样式4
.mdx-tag-name4 {
    background-color: var(--accent-color4);
    box-shadow: 0 0 0 1px var(--accent-color4-light) inset;
}

.mdx-tag-value4 {
}

// 双标签样式右边右边值风格2-样式5
.mdx-tag-name5 {
    background-color: var(--accent-color5);
    box-shadow: 0 0 0 1px var(--accent-color5-light) inset;
}

.mdx-tag-value5 {
}

// 双标签样式右边右边值风格2-样式6
.mdx-tag-name6 {
    background-color: var(--accent-color6);
    box-shadow: 0 0 0 1px var(--accent-color6-light) inset;
}

.mdx-tag-value6 {
}

// 表格内的彩虹标签，大小进行缩小，以适应行距与正文不同造成重叠
table .mdx-tag-c1,
table .mdx-tag-c2,
table .mdx-tag-c3,
table .mdx-tag-c4,
table .mdx-tag-c5,
table .mdx-tag-c6,
table .mdx-tag-name1,
table .mdx-tag-name2,
table .mdx-tag-name3,
table .mdx-tag-name4,
table .mdx-tag-name5,
table .mdx-tag-name6,
table .mdx-tag-value1,
table .mdx-tag-value2,
table .mdx-tag-value3,
table .mdx-tag-value4,
table .mdx-tag-value5,
table .mdx-tag-value6 {
    font-size: 0.85em;
}

// h6内的code标签强制取消加粗
h6 code {
    font-weight: normal;
}

/**************************************
* 封面、封底
**************************************/

// 页面第1个H6为封面样式
#write > h6:first-of-type,
// 页面最后1个H6为封底样式
#write > h6:last-of-type {
    display: block;
    color: @coverTextColor !important;
    font-size: 2.5em;
    font-family: @titleFont;
    font-weight: @fontWeight;
    text-align: @coverTextAlign;
    height: 950px;//25cm;
    padding: @coverTextPadding;
    margin: 10px 0 3em;
    border: 0;
    border-radius: 16px;
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    line-height: 1.3 !important;
}

// 封底样式微调
#write > h6:last-of-type {
    height: 550px;//14cm;
    margin-top: 3em;
    margin-bottom: 10px;
    // padding-top: 50px;
    padding: @backCoverTextPadding;
    color: @backCoverTextColor !important;
    text-align: @backCoverTextAlign;
    background-color: @backCoverBackgroundColor;
    background-image: @backCoverBackgroundImage;
    background-size: @backCoverBackgroundSize;
    background-repeat: @backCoverBackgroundRepeat;
    background-position: @backCoverBackgroundPosition;
}
#write > h6:first-of-type::before,
#write > h6:last-of-type::before {
    content: "";
}

// 封面内下标信息
#write > h6:first-of-type sub {
    color: @coverSubColor;
}

// 封面内上标信息
#write > h6:first-of-type sup {
    color: @coverSupColor;
}

// 封面内密级信息
#write > h6:first-of-type code {
    font-size: 0.4em !important;
    box-shadow: 0 0 0 1px fade(@themeForeColor, 20%) inset;
}

// 封面内的作者信息
#write > h6:first-of-type strong,
#write > h6:first-of-type strong::before {
    color: @coverAuthorColor;
    font-size: 0.6em !important;
    font-family: @boldFont;
    font-weight: normal;
    // font-weight: @fontWeight;
    // text-decoration: none;
}

// 作者信息前缀
#write > h6:first-of-type strong::before {
    content: "By ";
    // font-size: 0.7em !important;
    // font-weight: normal;
    // color: @coverAuthorColor;
    // text-decoration: none;
}

// 封面内的版权信息
#write > h6:first-of-type em {
    color: @coverOwnerColor;
    font-size: 0.4em;
    font-family: @boldFont;
    // font-weight: normal;
    font-style: normal !important;
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1024px) {
    // 逐章导航UI
    .mdx-chapter-nav {
        left: 10px !important;
    }
    .mdx-chapter-nav-current {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    .mdx-chapter-nav-prev,
    .mdx-chapter-nav-next {
        width: 20% !important;
    }
    .mdx-chapter-nav-prev-text,
    .mdx-chapter-nav-next-text {
        display: none !important;
    }
    // 取消自动换行
    table {
        white-space: pre !important;
    }

    // 页面第1个H6为封面样式
    #write > h6:first-of-type,
    // 页面最后1个H6为封底样式
    #write > h6:last-of-type {
        font-size: 2em !important;
    }
}

// 针对超大屏手机、iPad 等设备的 UI 调整
@media screen and (min-width: 641px) and (max-width: 1023px) {
    .mdx-welcome-screen {
        font-size: 1.5em !important;
    }
}

// 针对大屏手机的 UI 调整
@media screen and (min-width: 361px) and (max-width: 639px) {
    .mdx-welcome-screen {
        font-size: 1.3em !important;
    }
}

// 针对中小屏手机的 UI 调整
@media screen and (max-width: 360px) {
    .mdx-welcome-screen {
        font-size: 1em !important;
    }
}

// ---------------
// 针对打印的配置
@media print {
    html {
        font-size: 1em;
    }

    #write {
        margin: 0 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        box-shadow: none !important;
        background: none !important;
    }

    .mdx-table-cross {
        box-shadow: none !important;
        background: none !important;
    }

    //   .mdx-figure-hover,
    .mdx-figure:hover,
    img:hover,
    table:hover {
        border-color: var(--table-border-color) !important;
    }

    .mdx-figure-caption:hover {
        background-color: var(--doc-bg-color-alt);
    }

    .mdx-btn-open-in-new-tab {
        display: none;
    }

    .mdx-img-invert-in-dark {
        filter: none;
    }

    // table th:first-child,
    // table td:first-child{
    //     white-space: pre !important;
    // }

    blockquote {
        display: block !important;
    }

    .mdx-welcome-screen,
    .mdx-tool-tips,
    .mdx-info-tips {
        display: none !important;
    }

    .mdx-current-blockfocus-item {
        box-shadow: none !important;
    }

    // 显示原始的目录
    #write .md-toc {
        display: block !important;
    }

    // 清空当前章节的样式
    .mdx-header-current {
        background: none !important;
    }
    .mdx-header-current a {
        color: var(--fore-color) !important;
    }

    .mdx-toc {
        display: block !important;
        visibility: visible !important;
    }

    .mdx-toolbar, 
    .mdx-chapter-nav,
    .mdx-toc-panel,
    .mdx-toc-panel-header,
    .mdx-toc-panel-body-scroll {
        display: none;
        visibility: hidden;
    }
    
    #write > h6:first-of-type,
    #write > h6:last-of-type,
    #write > h6:first-of-type strong,
    #write > h6:first-of-type em {
        background: #FFFFFF none !important;
        color: @foreColorLight !important;
    }
}

// 结束针对打印的配置
// --------------------  

// 针对 Dark 模式的配置
@media (prefers-color-scheme: dark) {
    :root {
        --vlook-color-scheme: "dark";
        --vlook-invert-in-dark: invert(1); // Dark 模式下图片滤镜
        
        // --------------------
        // Typora UI 颜色变量
        --bg-color: var(--doc-bg-color-dark);
        --side-bar-bg-color: var(--doc-bg-color-dark);
        --text-color: var(--fore-color-dark);

        --select-text-bg-color: @themeBgColorFade;

        --control-text-color: var(--fore-color-dark);
        --control-text-hover-color: var(--fore-color-dark);
        --window-border: 1px solid var(--doc-bg-color-alt-dark);

        --active-file-bg-color:  var(--doc-bg-color-dark);
        --active-file-border-color: var(--select-text-bg-color);
        --active-file-text-color: var(--fore-color-dark);

        --item-hover-bg-color: var(--fore-color-alt-dark);
        --item-hover-text-color: var(--fore-color-dark);
        
        --primary-color: @themeBgColor;

        --rawblock-edit-panel-bd: var(--doc-bg-color-dark);

        --search-select-bg-color: @themeBgColorFade;

        // --------------------
        // 颜色变量
        --doc-bg-color: var(--doc-bg-color-dark);
        --doc-bg-color-alt: var(--doc-bg-color-alt-dark);
        --doc-bg-color-transparent: var(--doc-bg-color-transparent-dark);
        --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-dark);
        --fore-color: var(--fore-color-dark);
        --fore-color-alt: var(--fore-color-alt-dark);
        --tips-bg-color: var(--tips-bg-color-dark);
        --tips-bg-color-inset: var(--tips-bg-color-inset-dark);
        --shadow-color: var(--shadow-color-dark);
        --a-color: var(--a-color-dark);
        --mark-color: var(--mark-color-dark);
        // --a-line-color: var(--a-line-color-dark);
        // --a-active-color: var(--a-active-color-dark);
        // --theme-bg-color-fade: var(--theme-bg-color-fade-dark);
        --table-color: var(--table-color-dark);
        --table-border-color: var(--table-border-color-dark);
        --table-th-bg-color: var(--table-th-bg-color-dark);
        --table-th-border-color: var(--table-th-border-color-dark);
        // --img-dark-filter: var(--img-dark-filter-dark);
        --del-color: var(--del-color-dark);
        --toc-header-num-color: var(--toc-header-num-color-dark);
        // --content-header-num-color: var(--content-header-num-color-dark);
        --header-color: var(--header-color-dark);
        --header-box-shadow: var(--header-box-shadow-dark);
        --header-bg-start-color: var(--header-bg-start-color-dark);
        --header-bg-end-color: var(--header-bg-end-color-dark);
        --code-bg-color: var(--code-bg-color-dark);
        // --code-bg-color-transparent: var(--code-bg-color-transparent-dark);
        --code-name-bg-color: var(--code-name-bg-color-dark);
        --code-name-shadow-color: var(--code-name-shadow-color-dark);
        --accent-color1: var(--accent-color1-dark);
        --accent-color2: var(--accent-color2-dark);
        --accent-color3: var(--accent-color3-dark);
        --accent-color4: var(--accent-color4-dark);
        --accent-color5: var(--accent-color5-dark);
        --accent-color6: var(--accent-color6-dark);
        --mermaid-accent-color1: var(--mermaid-accent-color1-dark);
        --mermaid-accent-color1-alt: var(--mermaid-accent-color1-alt-dark);
        --mermaid-accent-color2: var(--mermaid-accent-color2-dark);
        --mermaid-accent-color2-alt: var(--mermaid-accent-color2-alt-dark);
        --mermaid-accent-color3: var(--mermaid-accent-color3-dark);
        --mermaid-accent-color3-alt: var(--mermaid-accent-color3-alt-dark);
        --mermaid-accent-color4: var(--mermaid-accent-color4-dark);
        --mermaid-accent-color4-alt: var(--mermaid-accent-color4-alt-dark);
        --mermaid-accent-color5: var(--mermaid-accent-color5-dark);
        --mermaid-accent-color5-alt: var(--mermaid-accent-color5-alt-dark);
        --mermaid-accent-color6: var(--mermaid-accent-color6-dark);
        --mermaid-accent-color6-alt: var(--mermaid-accent-color6-alt-dark);
        --cm-keyword: var(--cm-keyword-dark);
        --cm-variable: var(--cm-variable-dark);
        --cm-variable-2: var(--cm-variable-2-dark);
        --cm-variable-3: var(--cm-variable-3-dark);
        --cm-tag: var(--cm-tag-dark);
        --cm-attribute: var(--cm-attribute-dark);
        --cm-CodeMirror-cursor: var(--cm-CodeMirror-cursor-dark);
        --cm-string: var(--cm-string-dark);
        --cm-string-2: var(--cm-string-2-dark);
        --cm-comment: var(--cm-comment-dark);
        --cm-header: var(--cm-header-dark);
        --cm-quote: var(--cm-quote-dark);
        --cm-hr: var(--cm-hr-dark);
        --cm-link: var(--cm-link-dark);
        --cm-negative: var(--cm-negative-dark);
        --cm-positive: var(--cm-positive-dark);
        --cm-meta: var(--cm-meta-dark);
        --cm-bulidin: var(--cm-bulidin-dark);
        --cm-bracket: var(--cm-bracket-dark);
        --cm-atom: var(--cm-atom-dark);
        --cm-number: var(--cm-atom-dark);
    }

    // Dark 模式的插图背景图
    .md-diagram-panel svg,
    .mdx-figure-content svg {
        background: @figureBackgroundDark;
    }

    img {
        background: @figureBackgroundDark !important;
    }
    // 图片URL参数指定在 Dark 模式时反色
    img[src*="invert=in-dark"] {
        // filter: invert(1);
        filter: var(--vlook-invert-in-dark);
        border-color: @imgInvertInDarkBorderColor !important;
        background: @figureBackgroundLight !important;
    }
}

// 对支持毛玻璃样式的浏览器的处理
// 毛玻璃计算会影响影响（特别是 Windows 平台），目前建议关闭
@supports ((backdrop-filter: blur(15px)) or
    (-webkit-backdrop-filter: blur(15px))) {

    // .mdx-toolbar, // 由程序处理，避免在封面时就启用
    .mdx-btn-float,
    .mdx-chapter-nav,
    .mdx-btn-open-in-new-tab,
    .mdx-btn-copy-code-block {
        // background-color: fade(@buttonBgColor, 75%);
        // backdrop-filter: blur(15px);
        // -webkit-backdrop-filter: blur(15px);
    }

    .mdx-welcome-screen {
        // background: linear-gradient(@themeBgColorDark 0%, @themeBgColor 20%, @themeBgColorFade);
    }
}

:root {
    --mermaid-font-family: @textFont !important;
    --mermaid-alt-font-family: @textFont !important;
}

// 打印时的版式设计，因浏览器均未支持，暂缓应用
// @page:right{
//     @bottom-left {
//         margin: 10pt 0 30pt 0;
//         border-top: .25pt solid #666;
//         content: "Our Cats";
//         font-size: 9pt;
//         color: #333;
//     }

//     @bottom-right { 
//         margin: 10pt 0 30pt 0;
//         border-top: .25pt solid #666;
//         content: counter(page);
//         font-size: 9pt;
//     }

//     @top-right {
//         content: string(doctitle);
//         margin: 30pt 0 10pt 0;
//         font-size: 9pt;
//         color: #333;
//     }
// }